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.


Want to learn about aphantasisa and hyperphantasia, the Shen Yun cult, or unmasking cult leader Karen Zerby? Check out my new blog at Life After Tech.

377 thoughts on “JavaScript Date Format”

  1. Hi Steven,

    First of all great job Steven. Thanks for the script. You saved my work. I am a newbie in javascript. I also need to write a function where the input format is always in yyyy-MM-dd and I have convert this to different formats (into different country formats). How can I do this with this script? Do I have make any changes to the script? Please help me on this.

    Thanks,
    robust

  2. Hi Steven,

    Great code!
    I’ve just added 2 new functions:


    Number.prototype.toDate = function (mask, utc) {
    return new Date(this).format(mask, utc);
    }
    String.prototype.toDate = function (mask, utc) {
    return new Date(this).format(mask, utc);
    }

    Cheers,
    Jardel Weyrich

  3. Hi Steven,

    Nice article. I don’t see, however, any comments to follow on Pipnaintez’s post, i.e. ‘MM’ returns Months, and ‘mm’ returns minutes. I have currently tested under IE6/7/8, Firefox2/3, Safari, Opera and Chrome. They all confirm it.

  4. @Veli, as I responded to @Pipnaintez just below his comment, that’s not true. In this library, “mm” returns months and “MM” returns minutes, like the above documentation says. This differs from some other date formatting libraries.

  5. You have provided good information. I was thinking a lot how could i do the date format and finally when i saw your site everything got cleared. Thank you

  6. Hi, could you help me formatting this date “Mon Oct 20 19:00:00 EDT 2008”? As long as I checked the Date.parse() does not support such DateFormat, but I want to be sure.

    dateFormat(‘Mon Oct 20 19:00:00 EDT 2008′,’mmmm dS, yyyy h:MM TT’) = October 21st, 2008 2:00 AM

    Is it possible to have as a result “October 20th, 2008 7:00 PM” – I need just some formatting, but the script should not use the user’s clock.

    Thank You!

    PS: The library is just great! Thanks, Steve!

    GiV

  7. I just want to share my insight on why MM and mm may be confused. If you are wondering why MM and mm are reveresed make sure you are not overriding the format method through some other library. In my case it was ASP.NET Ajax ScriptManager (which is quite hideous because you do not really see the javascript in the sourcecode but it is referenced through some WebResource.axd handler) but it may be another js script. In this case you are just using another library even if it looks like this one:)

  8. I’ve taken this prototype and modified it to work with SQL date format styles for interaction with a SQL server backend.

    However, I realise I need a date validation function for inputs that can handle date formats in the same styles. I.e. pass a date string and a mask and verify whether the date is valid based on the mask.

    Can anyone recommand anything that does this?

  9. There’s a bug in the dateFormat function’s argument tests that means you can’t pass a mask pattern or name that includes digits or it will be mistaken for a date string.

    The bug is caused by this test -> !/\d/.test(date)

    Short of not passing mask patterns or names that include digits, I’m not sure how best to avoid this.

  10. Hi, could you please help me formatting this date “Sat Aug 10 00:00:00 UTC+0530 2024”?
    The date value stored in excel sheet is in this format “08/03/26”.
    But when I try to fetch the date from the same excel sheet it is showing in the following format “Sat Aug 10 00:00:00 UTC+0530 2024”.

    Is it possible to have as a result in the format “yy/mm/dd” i.e. “08/03/26” – I need just some formatting using javascript.

  11. @Anthony, that’s not a bug. The behavior is documented above: “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.”

    Remember that dateFormat() takes a date as it’s first argument. The ability to skip the date argument is merely provided as a convenience. To pass in the current date, you can simply use new Date(). You could also store your mask as a named mask, and use it that way (with the same limitation that the mask name not include numbers if you want to be able to skip the date argument).

  12. Hi, Steven, thanks for your reply and my apologies for not reading your notes closely enough.

    I’m basing my modified version on the date format styles listed here –
    http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.help.ase_15.0.blocks/html/blocks/blocks125.htm

    What I’ve decided to do instead is use a standard array rather than an associative array and pass a number (the SQL date style) as the index into the mask array (or a mask string as you allow).

    This seems to work quite well. Still not making much headway with date validation based on a mask though.

  13. @Anthony, here’s a quick function I created for you that validates a date string according to a date mask (using the same flags as dateFormat). It depends on the dateFormat.i18n object from the Date Format script. I’ve only briefly tested it, and a known issue is that it doesn’t validate that a date actually exists (e.g., the “dd” flag will always allow “31”, even for months without 31 days). Hopefully it meets your needs or at least gets you further along. Essentially it uses the mask provided as the second argument to dynamically construct a regex that is then used to validate the date string provided as the first argument.

    http://stevenlevithan.com/assets/misc/validateDateToMask.js

  14. Hi, Steven. I incorporated a subset of your code (for just the dmy patterns I’m interested in) into the date validate function I’ve been writing. I’ve gone further along with the validate but I’ve hit some snags.

    I liked your regexp patterns so I so swapped mine with them but I think I may have to go back to mine.

    Here’s some code snippets that will help illustrate the problems I still have –

    function validDate(date, mask)
    {
    var token = /d{1,2}|m|M|y/g,
    flags =
    {
    d: “([1-9]|[12]\\d|3[01])”,
    dd: “(0[1-9]|[12]\\d|3[01])”,

    escape = function(str){return str.replace(/[[\]{}()*+?.\\^$|]/g, “\\$&”)},
    re = new RegExp(escape(mask).replace(token, function($0){return flags[$0]}), “i”)

    if (re.test(date))
    {
    var darr = date.match(re),

    At this point I get an array of the match patterns for further checking but I found that if I gave it a date string of “2008/feb/31” and a mask of “y/M/d” (I’m using M to represent a month name), I get “3” for the day rather than the expected “31”. So the globbing is non-greedy.

    I think now that I should grab as many digits as there are in between separators (although that may hose me for one of the SQL patterns that has no separators – unless I add more mask flags) and do some checks like are there the expected number of digits.

    Next bit of code (follows directly on from the above) –

    types =
    {
    y: 0,
    M: 1,
    m: 1,
    d: 2,
    dd: 2
    },
    marr = (mask.replace(token, function($0){return types[$0]})).match(/\d/g),
    dtarr = [0, 0, 0],
    x,
    testdate

    for (var i = 0; i -1 ? x : parseInt(darr[i + 1], 10) – 1
    }
    else
    dtarr[marr[i]] = parseInt(darr[i + 1], 10)
    }

    Here I manipulate the mask to work out which parts of the arrays are the which date parts. It works OK except that the indexOf() expects an exact match. So If “dec” or “DEC” is passed I need to manipulate it first in order to match “Dec”. Perhaps the easiest fix is to make the short month name array all uppercase and call toUpperCase() on the indexOf() arg.

    The last problem was here (next piece of code) –

    testdate = new Date(dtarr[0], dtarr[1], dtarr[2])

    It turns out that Date() doesn’t barf if you pass (2007, 1, 31) but instead advances the date to March. This isn’t really a problem because I can use my old code to check the number of days against the month and test the Feb days but I was planning to pass the date string to the dateFormat function and return a correctly formatted one.

    Anyway, I hope the above is of some use to you or anyone else.

  15. Oops, the for loop got messed up (I didn’t escape the entities). Here it is again –

    for (var i = 0; i < 3; i++)
    {
    if (marr[i] == 1)
    {
    x = dateFormat.i18n.indexOf(darr[i + 1])
    dtarr[marr[i]] = x > -1 ? x : parseInt(darr[i + 1], 10) – 1
    }
    else
    dtarr[marr[i]] = parseInt(darr[i + 1], 10)
    }

  16. I’m struggling on how to implement this for use in the following:

    Scenario – I’m attempting to reformat a story.pubDate call in a RSS grab using the following:

    <a href=”>( –

  17. Hi,
    Thanks for the date. I have used it and very happy with it, But I also wanted to capture a day after the selected date. Is there a easy way to do it.

  18. I found a bug in the code that causes the routine to parse the 12-hour “h” incorrectly when running on the Rhino Javascript engine.

    When parsing a lowercase “h” for 12-hour hours, Rhino always evaluates this to “true”. For instance, this mask:

    mm/dd/yyyy h:MM:ss TT

    Would cause the code to output something like this:

    12/02/2008 true:10:08 PM

    The problem is with these lines:

    h: H % 12 || 12,
    hh: pad(H % 12 || 12),

    In Rhino, anything that uses the Logical OR operator || results in a true/false result. “Anynumber OR 12” always evaluates to “true” – so that’s what it spits out. Interestingly enough, in most browsers I have tested, this problem doesn’t exist.

    My somewhat inelegant solution is to change the lines thus:

    h: H % 12 + (H % 12==0?12:0),
    hh: pad(H % 12 + (H % 12==0?12:0)),

    On my Rhino engine, this solves the problem, and does not break the implementation on any of the browser Javascript engines that I have tested.

  19. One more problem with the Rhino engine, similar to the one above. Inside the pad function:

    len = len || 2;

    It can be fixed by changing it to:

    len = Number(len)?len:2;

  20. Hi.

    I have problem with this script. I need script for formating dates and this looks like it has everything I need. But I can’t make it work. I’m not javascript expert, so this question might sound ridiculous. I copied that source code on my website in tags, and tried to run your examples, but nothing happens.
    After that I put that code in 1st JavaScript Editor, and tried to check that code for syntax errors, and it didn’t pass. Program is claiming that in following lines

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

    it sees error “Identifier Expected”. He puts cursor behind key word “in”.

    Could sb help me ?

  21. Thanks for this! It was exactly what I needed. It’d be cool to combine this with some of the other Javascript date libraries. Then a developer can choose to conditionally download the components that they need to use. I’d combine this with my Rails-like date helpers.

  22. Hi..

    I Called date function as ‘dateFormat(now, “dddd, mmmm dS, yyyy, h:MM:ss TT”);’ in between html code, but its not showing the Date..

    How to Call this function?

  23. I wanted to take a few moments to say thank you for this article, it really helped me solve a recent development issue, have a great week.

  24. Is there a reason for using “m” for months and “M” for minutes, when the standards are saying quite the opposite?

    It seems like it is very hard to find a function that will do “parse” operation for a given date string. All functions are doing some kind of “guessing” on the date pattern. There is no solution that actually accepts a date pattern.

  25. @bashan, regarding your question, there are numerous, conflicting standards (open, proprietary, and de facto) for date formatting. If MM and mm were reversed, I’d also want to change the casing of about a dozen other tokens. Rather than getting into all the subjective reasoning behind the chosen tokens, I’ll just state that changing them at this point is unfeasible since a lot of people are already using this script.

  26. According to me the following also will work for get day of the week:

    var mydate = new Date();
    var myweekday= mydate.getDay();
    alert(myweekday);

  27. Hi Firnds i have one problem here

    I have one date value with the format of “2009-04-23T06:30:00” now i want to increase 30 second in this date and return value with the same date format

    for that what can i do ?

    I have done some code for that but this is working for System Date but i need to pass my Own Date Value as an parameter.

    My Code:
    var now = new Date();
    var date1 = now.format(“isoDateTime”);
    now.setMinutes(now.getMinutes() + 30);
    var date2 = now.format(“isoDateTime”);

    thanks,

Leave a Reply

Your email address will not be published. Required fields are marked *