Flagrant Badassery

A JavaScript and regular expression centric blog

JavaScript Date Format

Saturday, June 9th, 2007 • Related • Filed Under

Update: The documentation below has been updated for the new Date Format 1.1. Get it now!

Although JavaScript provides a bunch of methods for getting and setting parts of a date object, it lacks a simple way to format dates and times according to a user-specified mask. There are a few scripts out there which provide this functionality, but I've never seen one that worked well for me… Most are needlessly bulky or slow, tie in unrelated functionality, use complicated mask syntaxes which more or less require you to read the documentation every time you want to use them, or don't account for special cases like escaping mask characters within the generated string.

When choosing which special mask characters to use for my JavaScript date formatter, I looked at PHP's date function and ColdFusion's discrete dateFormat and timeFormat functions. PHP uses a crazy mix of letters (to me at least, since I'm not a PHP programmer) to represent various date entities, and while I'll probably never memorize the full list, it does offer the advantages that you can apply both date and time formatting with one function, and that none of the special characters overlap (unlike ColdFusion where m and mm mean different things depending on whether you're dealing with dates or times). On the other hand, ColdFusion uses very easy to remember special characters for masks.

With my date formatter, I've tried to take the best features from both, and add a little sugar of my own. It did end up a lot like the ColdFusion implementation though, since I've primarily used CF's mask syntax.

Before getting into further details, here are some examples of how this script can be used:

var now = new Date();

now.format("m/dd/yy");
// Returns, e.g., 6/09/07

// Can also be used as a standalone function
dateFormat(now, "dddd, mmmm d, yyyy, h:MM:ss TT");
// Saturday, June 9, 2007, 5:46:21 PM

// You can use one of several named masks
now.format("isoFullDateTime");
// 2007-06-09T17:46:21.431-0500

// ...Or add your own
dateFormat.masks.hammerTime = 'HH:MM! "Can\'t touch this!"';
now.format("hammerTime");
// 17:46! Can't touch this!

// When using the standalone dateFormat function,
// you can also provide the date as a string
dateFormat("Jun 9 2007", "fullDate");
// Saturday, June 9, 2007

// Note that if you don't include the mask argument,
// dateFormat.masks.default is used
now.format();
// Sat Jun 9 2007 17:46:21

// And if you don't include the date argument,
// the current date and time is used
dateFormat();
// Sat Jun 9 2007 17:46:22

// Finally, you can skip the date argument (as long as your mask doesn't
// contain any numbers), in which case the current date/time is used
dateFormat("longTime");
// 5:46:22 PM EST

Following are the special characters supported. Any differences in meaning from ColdFusion's dateFormat and timeFormat functions are noted.

Mask Description
d Day of the month as digits; no leading zero for single-digit days.
dd Day of the month as digits; leading zero for single-digit days.
ddd Day of the week as a three-letter abbreviation.
dddd Day of the week as its full name.
m Month as digits; no leading zero for single-digit months.
mm Month as digits; leading zero for single-digit months.
mmm Month as a three-letter abbreviation.
mmmm Month as its full name.
yy Year as last two digits; leading zero for years less than 10.
yyyy Year represented by four digits.
h Hours; no leading zero for single-digit hours (12-hour clock).
hh Hours; leading zero for single-digit hours (12-hour clock).
H Hours; no leading zero for single-digit hours (24-hour clock).
HH Hours; leading zero for single-digit hours (24-hour clock).
M Minutes; no leading zero for single-digit minutes.
Uppercase M unlike CF timeFormat's m to avoid conflict with months.
MM Minutes; leading zero for single-digit minutes.
Uppercase MM unlike CF timeFormat's mm to avoid conflict with months.
s Seconds; no leading zero for single-digit seconds.
ss Seconds; leading zero for single-digit seconds.
l or L Milliseconds. l gives 3 digits. L gives 2 digits.
t Lowercase, single-character time marker string: a or p.
No equivalent in CF.
tt Lowercase, two-character time marker string: am or pm.
No equivalent in CF.
T Uppercase, single-character time marker string: A or P.
Uppercase T unlike CF's t to allow for user-specified casing.
TT Uppercase, two-character time marker string: AM or PM.
Uppercase TT unlike CF's tt to allow for user-specified casing.
Z US timezone abbreviation, e.g. EST or MDT. With non-US timezones or in the Opera browser, the GMT/UTC offset is returned, e.g. GMT-0500
No equivalent in CF.
o GMT/UTC timezone offset, e.g. -0500 or +0230.
No equivalent in CF.
'…' or "…" Literal character sequence. Surrounding quotes are removed.
No equivalent in CF.

And here are the named masks provided by default (you can easily change these or add your own):

Name Mask Example
default ddd mmm d yyyy HH:MM:ss Sat Jun 9 2007 17:46:21
shortDate m/d/yy 6/9/07
mediumDate mmm d, yyyy Jun 9, 2007
longDate mmmm d, yyyy June 9, 2007
fullDate dddd, mmmm d, yyyy Saturday, June 9, 2007
shortTime h:MM TT 5:46 PM
mediumTime h:MM:ss TT 5:46:21 PM
longTime h:MM:ss TT Z 5:46:21 PM EST
isoDate yyyy-mm-dd 2007-06-09
isoTime HH:MM:ss 17:46:21
isoDateTime yyyy-mm-dd'T'HH:MM:ss 2007-06-09T17:46:21
isoFullDateTime yyyy-mm-dd'T'HH:MM:ss.lo 2007-06-09T17:46:21.431-0500

A couple issues:

  • In the unlikely event that there is ambiguity in the meaning of your mask (e.g., m followed by mm, with no separating characters), put a pair of empty quotes between your metasequences. The quotes will be removed automatically.
  • If you need to include literal quotes in your mask, the following rules apply:
    • Unpaired quotes do not need special handling.
    • To include literal quotes inside masks which contain any other quote marks of the same type, you need to enclose them with the alternative quote type (i.e., double quotes for single quotes, and vice versa). E.g., date.format('h "o\'clock, y\'all!"') returns "6 o'clock, y'all". This can get a little hairy, perhaps, but I doubt people will really run into it that often. The previous example can also be written as date.format("h") + "o'clock, y'all!".

Here's the code:

/*
	Date Format 1.1
	(c) 2007 Steven Levithan <stevenlevithan.com>
	MIT license
	With code by Scott Trenda (Z and o flags, and enhanced brevity)
*/

/*** dateFormat
	Accepts a date, a mask, or a date and a mask.
	Returns a formatted version of the given date.
	The date defaults to the current date/time.
	The mask defaults ``"ddd mmm d yyyy HH:MM:ss"``.
*/
var dateFormat = function () {
	var	token        = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloZ]|"[^"]*"|'[^']*'/g,
		timezone     = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
		timezoneClip = /[^-+\dA-Z]/g,
		pad = function (value, length) {
			value = String(value);
			length = parseInt(length) || 2;
			while (value.length < length)
				value = "0" + value;
			return value;
		};

	// Regexes and supporting functions are cached through closure
	return function (date, mask) {
		// Treat the first argument as a mask if it doesn't contain any numbers
		if (
			arguments.length == 1 &&
			(typeof date == "string" || date instanceof String) &&
			!/\d/.test(date)
		) {
			mask = date;
			date = undefined;
		}

		date = date ? new Date(date) : new Date();
		if (isNaN(date))
			throw "invalid date";

		var dF = dateFormat;
		mask   = String(dF.masks[mask] || mask || dF.masks["default"]);

		var	d = date.getDate(),
			D = date.getDay(),
			m = date.getMonth(),
			y = date.getFullYear(),
			H = date.getHours(),
			M = date.getMinutes(),
			s = date.getSeconds(),
			L = date.getMilliseconds(),
			o = date.getTimezoneOffset(),
			flags = {
				d:    d,
				dd:   pad(d),
				ddd:  dF.i18n.dayNames[D],
				dddd: dF.i18n.dayNames[D + 7],
				m:    m + 1,
				mm:   pad(m + 1),
				mmm:  dF.i18n.monthNames[m],
				mmmm: dF.i18n.monthNames[m + 12],
				yy:   String(y).slice(2),
				yyyy: y,
				h:    H % 12 || 12,
				hh:   pad(H % 12 || 12),
				H:    H,
				HH:   pad(H),
				M:    M,
				MM:   pad(M),
				s:    s,
				ss:   pad(s),
				l:    pad(L, 3),
				L:    pad(L > 99 ? Math.round(L / 10) : L),
				t:    H < 12 ? "a"  : "p",
				tt:   H < 12 ? "am" : "pm",
				T:    H < 12 ? "A"  : "P",
				TT:   H < 12 ? "AM" : "PM",
				Z:    (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
				o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4)
			};

		return mask.replace(token, function ($0) {
			return ($0 in flags) ? flags[$0] : $0.slice(1, $0.length - 1);
		});
	};
}();

// Some common format strings
dateFormat.masks = {
	"default":       "ddd mmm d yyyy HH:MM:ss",
	shortDate:       "m/d/yy",
	mediumDate:      "mmm d, yyyy",
	longDate:        "mmmm d, yyyy",
	fullDate:        "dddd, mmmm d, yyyy",
	shortTime:       "h:MM TT",
	mediumTime:      "h:MM:ss TT",
	longTime:        "h:MM:ss TT Z",
	isoDate:         "yyyy-mm-dd",
	isoTime:         "HH:MM:ss",
	isoDateTime:     "yyyy-mm-dd'T'HH:MM:ss",
	isoFullDateTime: "yyyy-mm-dd'T'HH:MM:ss.lo"
};

// Internationalization strings
dateFormat.i18n = {
	dayNames: [
		"Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",
		"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
	],
	monthNames: [
		"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
		"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
	]
};

// For convenience...
Date.prototype.format = function (mask) {
	return dateFormat(this, mask);
}

Download it here.

Note that the day and month names can be changed (for internationalization or other purposes) by updating the dateFormat.i18n object.

If you have any suggestions or find any issues, lemme know.

There Are 33 Responses So Far. »

  1. Comment by Boyan Kostadinov on 11 June 2007:

    Nice work!. I was using cfjs library (http://cfjs.riaforge.org/) which impliments a DateFormat and TimeFormat functions. I’ll point the guy to your post.

  2. Comment by Chris Jordan on 11 June 2007:

    Steve,

    Nice work on this DateFormat function. I like it. :o) I’m wondering if cfjs users would be confused by the added functionality (basically making TimeFormat unnecessary). But it wouldn’t be the first function in CFJS that doesn’t behave *exactly* like its CF counterpart. The added niceness is that it would decrease the size of the overall library since TimeFormat would go away (or maybe be aliased to DateFormat).

    So, would you mind terribly if I integrated it with the CFJS libraries?

    Cheers,
    Chris

  3. Comment by Chris Jordan on 11 June 2007:

    Also, I love the name of you blog. LOL! :o)

  4. Comment by Steve on 11 June 2007:

    @Chris Jordan,

    It’s MIT licensed, so feel free. Of course, I would appreciate it if you kept a link back to my site.

  5. Comment by Chris Jordan on 11 June 2007:

    @Steve,

    Oops! Didn’t see the license. Thanks! And of course I’ll include a link back! :o)

    Cheers,
    Chris

  6. Comment by Chris Jordan on 14 June 2007:

    I may have found a bug.

    I tried the following example from your blog post, but using CFJS’ implementation:

    alert($.DateFormat(new Date(), “It’s dddd”));

    and what I got as a response was:

    It’22 Thursday

    In other words, the function interpreted the s to mean seconds and not the literal character ’s’.

    I can’t see that any changes I made would have caused this.

    Any thoughts?

  7. Comment by Steve on 14 June 2007:

    It’s not a bug, but rather a case of where testing my own examples would have been a good idea. The single quote creates a word boundary, and as explained, mask sequences are special when they’re preceded and followed by a word boundary (as defined by the \b regex metasequence, which does not do any lexical analysis).

    I’ve modified the unpaired quote example and noted that quote marks count as word boundaries.

    Do you think the code would benefit from adjusting the special character escaping mechanism? If so, do you have any suggestions? I’d be interested in any feedback on this. However, I’d rather avoid complex implementations which rely on mimicking lookbehind, for example.

  8. Comment by Eric Hatley on 10 July 2007:

    Thanks for your work on this, you have no idea how much time you saved me from “recreating the wheel”. I do have one quesiton that really confused me while using your script. When i specified the ‘Z’ param, the script was returning locale time and the time zone as being UTC. Could something be set incorrectly in my browser, or am I just mis-interpretting the output from this script?

  9. Comment by Steve on 10 July 2007:

    Eric, the timezone is extracted from the toUTCString method’s value. What do you see in your browser when you run the following line of code?

    alert(new Date().toUTCString());

  10. Comment by Adrienne on 16 July 2007:

    I am also trying to find a way to display the local timezone abbreviation.
    When I ran alert(new Date().toUTCString());, I get the following:

    Firefox 2.0.0.4
    Mon, 16 Jul 2007 16:39:09 GMT

    IE 7.0.5730.11
    Mon, 16 Jul 2007 16:39:21 UTC

    I wonder how you are able to get EST, PST, etc.

  11. Comment by Steve on 16 July 2007:

    Adrienne, that’s a good question! This was apparently a brainfart on my part. I’ve removed the “Z” flag (and upped the version number to 0.2), because the results I claimed it would provide would in fact be more difficult to produce reliably, and as a result are beyond the scope of this function.

    To get the name of the client’s time zone in long form (also accounting for daylight savings), you could use date.toString().replace(/^.*\(|\)$/g, ""). On my system, that presently returns “Eastern Daylight Time”. To get “EDT” from that, you could add .replace(/[^A-Z]/g, ""). However, this stuff might not be reliable internationally.

  12. Comment by Scott Trenda on 29 October 2007:

    I like it! Clever. Fantastically clever.

    Although the time-zone formatting is a little off - in IE and Opera, you’ll get “MOCST” or “MOGMT”, depending on what your local time zone is. I tweaked with it a little, and the following seems rock-solid across browsers (and across international timezones, and in Opera, which doesn’t seem to recognize the timezone names, just GMT+offset). It’s a mouthful for sure, so you’d be wise to just split the first part off into a variable like var timeZone = /mouthful/g.

    case “Z”: return (d.toString().match(/\b(?:(?:(?:Pacific|Mountain|Central|Eastern|Atlantic)\s+|[PMCEA])(?:(?:Standard|Daylight|Prevailing)\s+|[SDP])(?:Time|T)|(?:GMT|UTC)(?:[+-]\d{4})?)\b/g) || [”"]).pop().replace(/[^A-Z0-9+-]/g, “”);

    The pop() part is for Mozilla, which contains both GMT+offset and the friendly title in its default toString(). Might as well return the friendly-name one, if the browser provides it.

    Again, thanks for this! Awesome to see good code exploiting the function-argument capabilities of replace(). ^_^

  13. Comment by Steve on 29 October 2007:

    @Scott Trenda, thanks! I’ve implemented your timezone handling (with a couple very minor changes), and brought back the Z flag. I’ve also changed the code so that the regexes and inner zeroize function are cached through closure. The version number has been upped to 0.4.

  14. Comment by Scott Trenda on 30 October 2007:

    You’re very welcome! Like I said, I love tweaking code that’s smart to start with.

    Not that it’d change the logic or significantly affect the performance one way or another, but here’s an alternate zeroize() function for you. A bit cleaner in my eyes, as it doesn’t use any temp variables, and doesn’t choke if no arguments are passed.

    function padZero (num, length) {
        num = String(num);
        length = parseInt(length) || 2;
        while (num.length < length)
            num = "0" + num;
        return num;
    };

  15. Comment by Steve on 30 October 2007:

    “I love tweaking code that’s smart to start with.” –Scott Trenda

    You and me both. :)

    Personally, I don’t care about protecting against invalid length values since zeroize (now just called pad, though it still only uses zeros) is private. However, avoiding the temp vars is definitely nicer so I’ve added that (now at v0.4.1).

    For the record, I certainly welcome these kinds of tweaks! They’re easy to miss, and most people don’t bother to point such things out. Thanks again.

  16. Comment by Cynthia on 11 November 2007:

    Hi Steve, Scott,

    Can you please post the final version of the your timezone handling javascript code?

    Thanks,
    Cynthia.

  17. Comment by Cynthia on 11 November 2007:

    var timeZoneStr = todayDate.toString().replace(/^.*\(|\)$/g, “”).replace(/[^A-Z]/g, “”);

    returns PST

    timeZoneStr = todayDate.toString().match((/\b(?:(?:(?:Pacific|Mountain|Central|Eastern|Atlantic)\s+|[PMCEA])(?:(?:Standard|Daylight|Prevailing)\s+|[SDP])(?:Time|T)|(?:GMT|UTC)(?:[+-]\d{4})?)\b/g) || [”]).pop().replace(/[^A-Z0-9+-]/g, ”);

    returns GMT +0800

  18. Comment by Cynthia on 11 November 2007:

    I would like to get the PST or EST or AST etc string from the javascript date object (for all the browsers with all different international time zones).

    If you can post your updated code that will be great.

  19. Comment by Steve on 11 November 2007:

    @Cynthia:

    What browser, OS, timezone, and locale/language are you using, and what do you see when you run the code alert(new Date().toString())? I’m going to post a new version of this script soon (including some new features as well as more code refactoring from Scott), so your help with this is appreciated.

    BTW, the regex Scott posted (the long one) matches full and abbreviated US timezone names as well as the UTC offset, if included, from the value returned by running toString() on a Date object. It then grabs just the last match in case there was more than one (since from both of our testing, the last match has been the preferable one), and clips extra characters. For non-US timezones or with the Opera browser (which doesn’t include timezone names in its toString() value), or in the case of browsers/configurations we have not considered which include the offset and timezone name in reversed order, this returns the UTC offset.

  20. Comment by Cynthia on 11 November 2007:

    Edit (Steve): Since it was stretching the page, I’ve replaced all instances of the first, shorter code from Cynthia’s last comment with [REGEX1], and all instances of the second, longer code with [REGEX2].

    Hi Steve,

    Using Firefox: toString() returns: Sun Nov 11 2007 15:53:28 GMT-0800 (Pacific Standard Time)
    [REGEX1] returns PST
    [REGEX2] returns PST

    Using IE7: toString() returns: Sun Nov 11 15:58:36 PST 2007
    [REGEX1] returns PST
    [REGEX2] returns PST

    If I change the time zone to IST, I get the following results (both IE and Firefox):
    [REGEX1] returns PST
    [REGEX2] returns GMT +0800

  21. Comment by Steve on 11 November 2007:

    Cynthia, what is the value of new Date().toString() when your timezone is “IST”?

    In any case, note that [REGEX2] (the “Z” flag handling) only supports abbreviations for US timezones, which is now noted in the documentation on this page. For other timezones or for all timezones in the Opera browser, it returns the GMT/UTC offset. That’s unfortunate, but I am not aware of any official, internationally recognized timezone abbreviation list. Taking just the uppercase letters from the full timezone names would be unreliable, and in any case it would sometimes overlap with the US timezone names. Use the new “o” flag for reliable GMT/UTC offsets regardless of the timezone, region, or language of your users’ browsers.

  22. Comment by Steve on 11 November 2007:

    I’ve just updated Date Format to version 1.0, and updated the documentation in this blog post along with it. 1.0 includes the new “o” (offset) flag and enhancements for code brevity provided by Scott Trenda, along with several new features, including a standalone dateFormat function, named and default masks (plus you can easily add your own), the ability to specify the date to format via a string, easier internationalization, etc. Check it out!

    1.0 includes one change which is not backwards compatible: mask characters and sequences no longer have to comprise entire words for them to be treated specially. The former handling was intended to make it dead-easy to mix literal characters into date masks, but ended up being a nuisance since most people had no need to use the code to embed dates in larger strings.

  23. Comment by Cynthia on 11 November 2007:

    Using Firefox: toString() returns: Mon Nov 12 2007 08:03:43 GMT+0530 (India Standard Time)

    Using IE7: toString() returns: Mon Nov 12 08:03:06 UTC+0530 2007

  24. Comment by Steve on 11 November 2007:

    Well, there you have it. There is simply no good way to pull “IST” from IE7’s value without building a comprehensive list of international timezone name abbreviations, which as far as I know doesn’t exist anyway. There is also no way either of the regexes could have pulled “PST” from either of those values, so I think you might have confused that with your Pacific timezone tests in your earlier comments.

    As noted previously, the “Z” flag supports US timezones only. Use the “o” flag for reliable GMT/UTC offsets.

  25. Pingback by Date Format 1.0 on 11 November 2007:

    […] just updated my ColdFusion-inspired JavaScript Date Format script to version 1.0, and updated the documentation in the old post along with it. 1.0 includes […]

  26. Comment by Steve on 12 November 2007:

    Kris Kowal integrated Date Format 1.0 as a module into his innovative, emerging JavaScript library called Chiron. In the process, he changed it so that if only one argument is provided to dateFormat and that argument contains no numbers, it’s treated as a mask and applied to the current date and time. I think that was a great change, so I’ve added it in version 1.1, and updated the above documentation. Thanks, Kris!

  27. Comment by Pipnaintez on 27 November 2007:

    Great work! It appears however the documentation has month and minutes backwards. MM is returning month and mm is returning minutes. According to the doc it is suppose to be the reverse.

    Thanks

  28. Comment by Steve on 27 November 2007:

    @Pipnaintez, I can’t reproduce the problem you mention. “mm” returns months, and “MM” returns minutes, like the docs say.

  29. Comment by Andreas Blixt on 6 December 2007:

    Hi Steve!

    I used your code as a base for reconstructing the PHP date() function in JavaScript. It supports most features that PHP’s date() function does, but takes milliseconds rather than seconds as the timestamp.

    I haven’t implemented all format characters yet (they will be replaced by ‘?’), so if anyone feels up for it, feel free to code them as well. The code hasn’t been tested thoroughly either.

    Here it is: http://javascript.mezane.org/date/date.js

  30. Comment by Dave on 8 February 2008:

    Is there any way to display time with the timezone that matches the offset rather than the browser’s local timezone? I want to display the time somewhere else in the world with their local timezone - not my local timezone.

  31. Comment by Bhupendra on 30 April 2008:

    Good job Steven,

    Was very much helpful.

  32. Comment by Gary F on 2 May 2008:

    Steven, thanks for writing this great function. I like your nod to ColdFusion and the similarity your function shares.

  33. Comment by DK on 6 May 2008:

    How will you add Alaska (ALA, ALAW) and Hawaii (HAW) time zone to the Z.

Post a Response

If you are about to post code, please escape your HTML entities (&amp;, &gt;, &lt;).