Show Todays Date And Current Time As Simple Text On Your Blog

Here's a simple JavaScript to show the current date anywhere in the blog. You can place this code either in any HTML/JavaScript widget, or anywhere else in the template as per you wish.

The output will be like this:


And the required code, to be added is this:
<script language="Javascript">
<!--

var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")

var monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")

var now = new Date

document.write("Today is " + dayName[now.getDay()] + ", " + monName[now.getMonth()] + " "+now.getDate() +".")

//-->
</script>

There's an even simpler code, to display date(like this):


Here's the code:
<script language="Javascript">
<!--

var now = new Date

document.write(now.getDate() + "/" + now.getMonth() + "/" + now.getYear())

//-->
</script>
And to show current time in text format, like this:


Add this code:
<script>
atoj = new Date();
atoj1= atoj.getHours();
atoj2 = atoj.getMinutes();
atoj3= atoj.getSeconds();

if(atoj1==0){atoj4=" AM";atoj1=12}
else if(atoj1 <= 11){atoj4=" AM"} else if(atoj1 == 12){atoj4=" PM";atoj1=12} else if(atoj1 >= 13){atoj4=" PM";atoj1-=12}

if(atoj2 <= 9){atoj2="0"+atoj2} document.write(""+atoj1+":"+atoj2+":"+atoj3+""+atoj4+""+"");
</script>

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

18 comments

Write comments
Sam
February 08, 2009 8:44 AM delete

Thanks for the code. I translated days and months in my own language.

Reply
avatar
March 18, 2009 11:17 PM delete

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.


Ann

http://externallaptop.net

Reply
avatar
July 26, 2009 10:24 PM delete

Man, how do I change the color of the date?

Reply
avatar
July 27, 2009 10:41 AM delete

Hello Felix,

You have to add two more lines of code to any of the above code, like this:

<span style="color: red;">
CODE FOR DATE/TIME HERE
</span>

Reply
avatar
July 02, 2010 10:42 PM delete

How do I change the time zone for the clock and date?

Reply
avatar
July 03, 2010 12:22 AM delete

You don't have to do that, this script automatically takes the date from the computer where the site is being viewed, so every visitor will automatically see the time/date of his/her own time zone.

Reply
avatar
December 30, 2010 2:42 PM delete

My blog is in Spanish and I modified the first code for it to fit the language... it was just a try... and it worked. Thanks a lot.

If you want to see the result, this is it. http://palabrasalasecho.blogspot.com

Reply
avatar
January 06, 2011 8:38 AM delete

Thank you very much for the code..
I had been loooking for it so long and just found your method..
Thank you very much!!

Posted in my language Tamil:
aalunga.blogspot.com

Reply
avatar
March 11, 2011 9:43 AM delete

hi everyone but i need to show the Standard time on my site as some system may have wrong time so they will see the wrong time na.....!

WWW.eceinjntu.blogspot.com

Reply
avatar
Anonymous
March 24, 2011 7:34 PM delete

Thanks for this.

How can I bold it?

Reply
avatar
March 26, 2011 8:52 AM delete

Hello, I would like to put the date as a calender like you show on this tutorial. But where is the javascript?

Reply
avatar
Anonymous
December 02, 2011 3:07 AM delete

Hi.. how do i enlarge the font size ???

Reply
avatar
Anonymous
August 31, 2012 10:19 AM delete

Really nice and simple!

Any chance of a 24 hour clock version?

Thx.

Reply
avatar
September 19, 2012 4:34 AM delete

How to add year in first code please?

Reply
avatar
October 29, 2012 2:28 AM delete

tried adding the first code in my post template but of no use..please help.I want the date to appear in my post template(i.e when i write a new post the date format as in the first code must be there)

Reply
avatar
January 31, 2013 4:55 PM delete

Looking for a html widget like this - but shows the day of the week. BTW your anti robot test is too hard to read.

Reply
avatar
July 04, 2013 6:42 PM delete

I have tried to combine the first and second way to get the format: "27 August 2012".
but what I find in this year is "27 Agust 113".
Then I changed the code "getDay" to "getFullYear" and succeed. :)
thank you

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon