Flagrant Badassery

A JavaScript and regular expression centric blog

JavaScript Date Format

Update: The documentation below has been updated for the new Date Format 1.2. 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 that 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 some 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 dS, yyyy, h:MM:ss TT");
// Saturday, June 9th, 2007, 5:46:21 PM

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

// ...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 09 2007 17:46:21

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

// You can also 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

// And finally, you can convert local time to UTC time. Either pass in
// true as an additional argument (no argument skipping allowed in this case):
dateFormat(now, "longTime", true);
now.format("longTime", true);
// Both lines return, e.g., 10:46:21 PM UTC

// ...Or add the prefix "UTC:" to your mask.
now.format("UTC:h:MM:ss TT Z");
// 10:46:21 PM UTC

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.
S The date's ordinal suffix (st, nd, rd, or th). Works well with d.
No equivalent in CF.
'…' or "…" Literal character sequence. Surrounding quotes are removed.
No equivalent in CF.
UTC: Must be the first four characters of the mask. Converts the date from local time to UTC/GMT/Zulu time before applying the mask. The "UTC:" prefix is 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 dd yyyy HH:MM:ss Sat Jun 09 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
isoUtcDateTime UTC:yyyy-mm-dd'T'HH:MM:ss'Z' 2007-06-09T22:46:21Z

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.2.3
 * (c) 2007-2009 Steven Levithan <stevenlevithan.com>
 * MIT license
 *
 * Includes enhancements by Scott Trenda <scott.trenda.net>
 * and Kris Kowal <cixar.com/~kris.kowal/>
 *
 * 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 to dateFormat.masks.default.
 */

var dateFormat = function () {
	var	token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/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 (val, len) {
			val = String(val);
			len = len || 2;
			while (val.length < len) val = "0" + val;
			return val;
		};

	// Regexes and supporting functions are cached through closure
	return function (date, mask, utc) {
		var dF = dateFormat;

		// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
		if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
			mask = date;
			date = undefined;
		}

		// Passing date through Date applies Date.parse, if necessary
		date = date ? new Date(date) : new Date;
		if (isNaN(date)) throw SyntaxError("invalid date");

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

		// Allow setting the utc argument via the mask
		if (mask.slice(0, 4) == "UTC:") {
			mask = mask.slice(4);
			utc = true;
		}

		var	_ = utc ? "getUTC" : "get",
			d = date[_ + "Date"](),
			D = date[_ + "Day"](),
			m = date[_ + "Month"](),
			y = date[_ + "FullYear"](),
			H = date[_ + "Hours"](),
			M = date[_ + "Minutes"](),
			s = date[_ + "Seconds"](),
			L = date[_ + "Milliseconds"](),
			o = utc ? 0 : 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:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
				o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
				S:    ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
			};

		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 dd 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",
	isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};

// Internationalization strings
dateFormat.i18n = {
	dayNames: [
		"Sun", "Mon", "Tue", "Wed", "Thu", "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, utc) {
	return dateFormat(this, mask, utc);
};

Download it here (1.2 KB when minified and gzipped).

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.


New library: Are you a JavaScript regex master, or want to be? Then you need my fancy XRegExp library. It adds new regex syntax (including named capture and Unicode properties); s, x, and n flags; powerful regex utils; and it fixes pesky browser inconsistencies. Check it out!

There Are 397 Responses So Far. »

  1. Fantastic web site. Lots of useful information here. I’m sending
    it to several friends ans additionally sharing in delicious.
    And of course, thanks for your effort!

  2. Hello,
    This seems great, however the download link lands on a 404 page.

  3. Right here is the right web site for anybody who wishes to understand this topic.
    You realize so much its almost hard to argue with you (not that I
    really will need to…HaHa). You certainly put a new spin on a topic which has been discussed for a long time.
    Great stuff, just excellent!

  4. Hi

    Thanks for your work on this, its very useful.

    Just one thing i got caught out because i was inadvertently passing a null value to dateFormat, which to my surprise return todays date. I am not sure if this is good, as null would not mean that i really meant today. a suggestion would be to be able to pass a default date if required as an option.

    Or am i missing somthing and returning today from null is desirable.

    thanks

    andy

  5. That is very attention-grabbing, You are an excessively professional blogger.
    I’ve joined your feed and look ahead to looking for extra of your excellent
    post. Also, I have shared your web site in my social networks

  6. Thanks for the marvelous posting! I actuall enjoyed reading
    it, you are a grdat author. I will make certain to bookmarek your blog and wiill come back in the foreseeable future.
    I want to encourage you continue your great writing, have a nice day!

  7. Greetings from Colorado! I’m bored to tears at work
    so I decided to browse your blog on my iphone during lunch break.
    I love the information you provide here and can’t wait to take a look
    when I get home. I’m surprised at how quick your blog loaded on my mobile ..
    I’m not even using WIFI, just 3G .. Anyways, fantastic blog!

  8. Thank you for some other magnificent article. Where else
    could anyone get that kind of info in such a perfect approach of writing?
    I’ve a presentation subsequent week, and I’m on the look for such
    info.

  9. Pretty nice post. I simply stumbled upon your weblog and wanted to mention that I’ve
    really loved browsing your weblog posts. In any case I will be subscribing in your feed and
    I hope you write once more soon!

  10. Hi there! I know this is kind of off topic but I was wondering which blog platform are you using for this website?

    I’m getting tired of WordPress because I’ve had issues with hackers and I’m
    looking at alternatives for another platform. I would be fantastic if you could
    point me in the direction of a good platform.

  11. This blog was… how do I say it? Relevant!!

    Finally I have found something which helped me. Thank you!

  12. Excellent, what a webpage it is! This web site provides useful data to us, keep it up.

  13. Have you ever thought about creating an ebook or guest authoring on other
    blogs? I have a blog based upon on the same subjects you discuss and would love to have you share some stories/information. I know my readers would value
    your work. If you’re even remotely interested, feel free to send me an email.

  14. Having read this I believed it was extremely enlightening.
    I appreciate you finding the time and energy to put this short article together.
    I once again find myself spending a lot of time both reading and
    commenting. But so what, it was still worth it!

  15. Great post. I was checking continuously this blog and I am impressed!
    Very helpful information specifically the last
    part ūüôā I care for such information much. I was looking for this particular info for a long
    time. Thank you and best of luck.

  16. Good information. Lucky me I came across your blog by accident
    (stumbleupon). I havee book marked it for later!

  17. Hello to all, because I am in fact keen of reading this website’s post to be updated
    daily. It includes nice material.

  18. Unfortunately there is a shit load of spam on this page, but I’ll add this anyway.

    I’ve created a GitHub project from this excellent piece of code. It’s called date-steroids and can be found here:
    https://github.com/rvanbaalen/date-steroids

    When you’re using bower, you can also install date-steroids by running bower install date-steroids

  19. […] Working with¬†date and time¬†has always been a tricky business so i found a script that handles that for me here […]

  20. […] then you can use a JavaScript Date Format script (1.2 KB when minified and gzipped) to display it as you […]

  21. […] The correct way to format a date to return “2012-12-29″ is with the script from JavaScript Date Format: […]

  22. Of all the personality types you will have in your downline, the ice is the one that
    will be the most organized and controlled. If Tiny
    Harris looks a little bit different this week, don’t be alarmed.
    Hence is a better cooling agent than the ice cubes we get
    after freezing water.

  23. excellent issues altogether, you simply gained a new reader.
    What might you suggest about your publish that you
    just made some days ago? Any sure?

  24. […] just discovered that the 1.2.3 version of Steven Levithan’s date.format.js does just what I want. It allows you to supply a format string for a JavaScript date and will […]

  25. […] then you can use a JavaScript Date Format script (1.2 KB when minified and gzipped) to display it as you […]

  26. […] The correct way to format a date to return “2012-12-29″ is with the script from JavaScript Date Format: […]

  27. What’s up, just wanted to tell you, I liked this blog post. It was inspiring. Keep on posting!

  28. […] will have to use an external library for formatted date output, “JavaScript Date Format” from Flagrant Badassery looks very […]

  29. […] then you can use a JavaScript Date Format script (1.2 KB when minified and gzipped) to display it as you […]

  30. […] is certainly full-featured, but I’d recommend this MUCH simpler lib (JavaScript Date Format) which I prefer simply because it’s only 120 lines or […]

  31. […] using a library written by Steven Levithan that helps with dealing with dates on the client side, Steven Levithan’s date library. The isoUtcDateTime format is perfect for what I needed. In my jquery AJAX call I use the format […]

  32. I’m getting a 404 accessing http://stevenlevithan.com/assets/misc/date.format.js

    Jim.

  33. […] just discovered that the 1.2.3 version of Steven Levithan’s date.format.js does just what I want. It allows you to supply a format string for a JavaScript date and will […]

  34. […] will have to use an external library for formatted date output, “JavaScript Date Format” from Flagrant Badassery looks very […]

  35. […] just discovered that the 1.2.3 version of Steven Levithan’s date.format.js does just what I want. It allows you to supply a format string for a JavaScript date and will […]

  36. The code works but when i try to pass the output as an input to a function that take in a String eg concatenate string, this is what i get,

    Concatenate String: Couldn’t concatenate strings

    The datatypes are not compatible. Cannot convert from type Undefined to String.

  37. Thank you for the good writeup. It in truth was a leisure account it.

    Look complicated to far introduced agreeable from you!
    However, how can we keep up a correspondence?

  38. If you are going for finest contents like me, only visit this web site daily
    for the reason that it presents feature contents, thanks

  39. awesome work, thanks for the great script.

  40. Moest even wat hierover corresponderen. Een artikel aangaande de lifttrap.

  41. Thank you for these explanations good work

  42. Is there a way to use a Canadian date format (dd/MM/yyyy) with this?

    Does the token, timezone, and timezoneClip need updated in order for that to work?

  43. Before you go try all kinds of things and spend crazy money trying to lose weight, just go to http://untold-secrets-of-weight-loss.com/ read it completely and just what is suggested there. These guys have just made it plain simple to get in shape, simple good old fashion common sense. You came to cinemassacre.com for a reason right, take action now.

  44. If you don’t know what to eat or what routine to do to get in shape, just go to http://untold-secrets-of-weight-loss.com/ and follow it end to end. These stuff has already been documented all you have to do is follow it to the letter. Don’t re-invent the wheel. You came to emu.edu for a reason right, take action now.

  45. YYYY-0MM-DD format would present a date in a way that most could clearly interpret in their country. Using the four digit year, three digit month (zero-filled) and a two digit day has many benefits. That way 1973-004-03 , 004-03-1973 and 03-004-1973 are clearly April 3, 1973 and not March 4, 1973 – in most cultures. This would avoid frustrations and re-processing time. More importantly in international research, development, medical records and other business that cross international boundaries; critical errors and mis-understandings would be reduced. Thoughts?

  46. It is off by a day. The following date is converted to Tue Oct 14.

    2014-10-15

    Tue Oct 14 2014 20:00:00 GMT-0400 (EDT)

  47. Hi Steven, Thanks for the code.

    In IE11 passing a date object to the date constructor sets the milliseconds in the new date to zero.

    I suggest –

    date = date ? typeof date == ‘object’ ? new Date(date.getTime()) : new Date(date) : new Date;

Post a Response

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