Basic JavaScript Date and Time Functions
By Will Bontrager2004-08-12
The Complete Working Example
|
|
Here is a web page that incorporates everything this tutorial has mentioned.
Note that JavaScript is line break sensitive. Thus, it's best to keep the lines as they are, at least until you are ready to do custom modifications.
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!— Copyright 2002 Bontrager Connection, LLC
function getCalendarDate()
{
var months = new Array(13);
months[0] = "January";
months[1] = "February";
months[2] = "March";
months[3] = "April";
months[4] = "May";
months[5] = "June";
months[6] = "July";
months[7] = "August";
months[8] = "September";
months[9] = "October";
months[10] = "November";
months[11] = "December";
var now = new Date();
var monthnumber = now.getMonth();
var monthname = months[monthnumber];
var monthday = now.getDate();
var year = now.getYear();
if(year < 2000) { year = year + 1900; }
var dateString = monthname +
' ' +
monthday +
', ' +
year;
return dateString;
} // function getCalendarDate()
function getClockTime()
{
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var ap = "AM";
if (hour > 11) { ap = "PM"; }
if (hour > 12) { hour = hour - 12; }
if (hour == 0) { hour = 12; }
if (hour < 10) { hour = "0" + hour; }
if (minute < 10) { minute = "0" + minute; }
if (second < 10) { second = "0" + second; }
var timeString = hour +
':' +
minute +
':' +
second +
" " +
ap;
return timeString;
} // function getClockTime()
//—>
</script>
</head>
<body>
<script type="text/javascript" language="JavaScript"><!—
var calendarDate = getCalendarDate();
var clockTime = getClockTime();
document.write('Date is ' + calendarDate);
document.write('<br>');
document.write('Time is ' + clockTime);
//—></script>
</body>
</html>
That's the complete working example. Create a file with the example and load it into your browser.
Functions getCalendarDate() and getClockTime() can be used wherever you need to extract the calendar date or clock time. While outside the scope of this tutorial, those results can be used in status bars, form fields, and other locations such as the title bar and in applications with layers. The time can be continuously updated by repeatedly calling the getClockTime() and printing the latest results.
With the above example, you have the basics to build your own calendars and clocks.
Tutorial Pages:
» Basic JavaScript Date and Time Functions
» How To Extract Information From that Date Object
» The Date
» The Time
» The Printing
» The Complete Working Example
Copyright 2004 Bontrager Connection, LLC
|
