JavaScript Clocks and Calendars, Part II, Custom Date/Time Display
This article shows you how dates can be printed in any language, with or without day of the week, using JavaScript. Date and time can be in any format you prefer.
Part I of this series, shows how to display the current time, with any custom format, as the text of a form button. This Part II shows how to display the date and day of the week, in addition to the time, in a form text field. (The form button code can now modified to include date information.)
If you want to bypass the tutorial aspects of this article, you can download the source code immediately from the demonstration page.
The Page Display
When you view the source code of the demonstration page, you'll notice that the form field input tag contains a CSS style attribute specifying the text to be centered in the form field. The centering will work with IE5+ and Netscape 6+ browsers.
The apparent size of the input text field will vary from browser to browser, even when you specify a size. Usually, the date/time display will be shorter than the available space in the text field. If you do not want the text to center in the field, simply remove the style attribute.
The size of the text field should be specified as the number of characters of the longest possible display. In the English language, Wednesday is the day of the week with the largest number of characters and September is the month. Therefore, to calculate the size of the text field for the demo page, I counted the number of characters in:
Today is Wednesday, September ##, #### at ##:##:## AM
The above is 53 characters long. Therefore, I put size="53" into the form field input tag.
The Multi-Lingual Aspect
The JavaScript source code lets you specify the names of the months and the days of the week. These can be in any written language. They can be spelled out or abbreviated.
The Display Formatting Function
The time display formatting function developed for Part I of this series has been expanded to also format dates, with or without the day of the week. It works the same way; what you specify as the DateTimeFormat will print on the page. Example:
DateTimeFormat = "WEEKDAY, MONTH DAY, YEAR at H24:0M:0S";
Before printing, however, any placeholders found in the DateTimeFormat will be replaced with live data (all other characters in the template are left alone). Here are the placeholders:
Placeholder Is replaced with
=========== ================
YEAR The 4-digit year.
YR The 2-digit year.
MONTH The month name.
MT The month number.
0MT The month number, with a zero leading single
digits.
WEEKDAY The day of the week.
DAY The day of the month.
0DAY The day of the month, with a zero leading
single digits.
H12 The hour (12-hour clock).
0H12 The hour, 12-hour clock, with a zero leading
single digits.
H24 The hour (24-hour clock).
0H24 The hour, 24-hour clock, with a zero leading
single digits.
MM The minute.
0M The minute, with a zero leading single digits.
SS The second.
0S The second, with a zero leading single digits.
AMPM "AM" if before noon, "PM" otherwise.
The "0" characters in the placeholders are zeros, not Ohs. Also, placeholders are case sensitive.
Assuming June 8, 2005 at 3:06:09 PM, the following formats will yield:
Today is WEEKDAY, MONTH DAY, YEAR at H12:0M:0S AMPM
Today is Wednesday, June 8, 2005 at 3:06:09 PM
0MT/0DAY/YR
06/08/05
0DAY.0MT.YR at H24:0M:0S
08.06.05 at 15:06:09
You can see how it works on the demonstration page at /a/15/pl.pl?jscc2
With the above, you'll be able to display dates and times in near inexhaustable variations.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2002 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
