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 bymm
, 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 asdate.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.
My new blog: Want to learn about being blind in your mind, or establishing residence in South Dakota to take advantage of nomad friendly laws, or the best energy drink based on important axes like mouth feel, coolness and stickiness, or how the Shen Yun traditional Chinese dance performances are in fact cult recruiting events? All of these and more await. Check it out!
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.
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
Comment by Chris Jordan on 11 June 2007:
Also, I love the name of you blog. LOL! :o)
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.
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
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?
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.
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?
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());
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.
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.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(). ^_^
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 innerzeroize
function are cached through closure. The version number has been upped to 0.4.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;
};
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 sincezeroize
(now just calledpad
, 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.
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.
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
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.
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 aDate
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 itstoString()
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.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
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.
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.
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
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.
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 […]
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!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
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.
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
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.
Comment by geoffrey.mcgill on 26 March 2008:
Hi Steve,
I was googling around and just happen to stumble upon this post. Nice job with the formatting. I’ve been working on a comprehensive JavaScript Date library (http://www.datejs.com/) for a while. I would appreciate any feedback you have.
I too implemented a Date formatting option, but tapped into .toString() to pass an optional “format” parameter.
Example
Date.today().toString(“MM/dd/yy”);
If no format parameter is passed the function will return the native .toString functionality.
Comment by Bhupendra on 30 April 2008:
Good job Steven,
Was very much helpful.
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.
Comment by DK on 6 May 2008:
How will you add Alaska (ALA, ALAW) and Hawaii (HAW) time zone to the Z.
Comment by M. A. Sridhar on 12 May 2008:
Very nice work, thanks! I will try to create a version with syntax closer to the Java Date class.
Comment by RM on 17 June 2008:
Hi,
Can u tell me how to use this function with a timestamp in isoFullDateTime format, from the xml and convert it to a UTC format. I’m getting and invalid date error when i pass this as
var d= segment.traveltime;
alert(d); //is fine
var datestring22 = dateFormat(d, “fullDate”); //gives invalid date error
Comment by jp clutier on 18 June 2008:
Hi I’m sorry but I don’t understand something..I wrote “dateFormat(date,”dd-mm-yyyy”);” I allways have a message “uncaught exception: invalid date”.
Does someone can help me please ?
(Sorry for my English…)
Comment by jp clutier on 18 June 2008:
Oups I forgot that date is “18-06-2008”
Comment by Steven Levithan on 20 June 2008:
@RM, what is UTC format? It sounds like you’re running into the same issue as jp clutier (see below).
@jp clutier, this function uses the native Date.parse method to convert a date passed in as a string to a
Date
object. The format you specified is not recognized by the somewhat limitedDate.parse
. You’ll need to either use a string that theparse
method recognizes, or create the date using theDate
constructor (e.g.,new Date(year, month, date)
).Comment by switch on 3 July 2008:
Thanks for an awesome script! Works like a charm!
I have a suggestion though that might be useful… I ran into the need to have the ‘st’, ‘nd’, ‘rd’, or ‘th’ appended to the end of the day (eg: 1st, 2nd, 3rd, 4th, etc…).
The solution was simple, Just add a method as follows:
postFix = function (value) {
if (value == 1 || value == 21 || value == 31) {
return value + “st”;
} else if (value == 2 || value == 22) {
return value + “nd”;
} else if (value == 3 || value == 23) {
return value + “rd”;
} else {
return value + “th”;
}
}
Then you can create new flags as follows:
dp: postFix(d),
ddp: postFix(pad(d)),
It’s really simple, I know, but I just thought it might be something you’d like to include.
Comment by switch on 3 July 2008:
Ok… scratch that about the flags… for some reason, if you put ‘dp’ (for example) into the mask, it comes back with something like ‘9p’ instead of ‘9th’!?
Any clues?
Comment by Steven Levithan on 4 July 2008:
@switch, you probably didn’t add your new flags to the
token
regex.I liked the idea of a flag for ordinal suffixes, so I’ve gone ahead and added it to the script and upped the version to 1.2. Here are the changes (the above post has been updated accordingly):
– The new
S
flag outputs date ordinal suffixes (“st”, “nd”, “rd”, “th”). Works well withd
. E.g.,dateFormat("mmmm dS, yyyy")
returns “July 4th, 2008”.– Added support for converting local time to UTC time before applying the format mask, via the third argument (Boolean) or the
UTC:
mask prefix (which allows applying UTC time via a named mask).– Several changes to the provided, named masks.
The named mask changes:
–
default
changed from “ddd mmm d yyyy HH:MM:ss” to “ddd mmm dd yyyy HH:MM:ss” so that the default format is a fixed width that is easier to parse, and matches Firefox’sDate.prototype.toString
(minus the time zone info).– Removed
isoFullDateTime
(was “yyyy-mm-dd’T’HH:MM:ss.lo”).– Added
isoUtcDateTime
(is “UTC:yyyy-mm-dd’T’HH:MM:ss’Z'”, which uses the new UTC conversion prefix).Comment by Stretch on 15 July 2008:
Here’s a complete list of time zone abbreviations.
http://www.timeanddate.com/library/abbreviations/timezones/
There are quite a few overlaps.
Comment by Bubba Ganoush on 25 July 2008:
OMG… such a simple mod!!! Where were you when they created this abomination called Javascript!!!
Comment by ArunB on 8 August 2008:
Can I convert ISO formatted date(string) ex: 2008-08-08T10:10+00:00 to a Date object using dateFormat?
Comment by Tyler on 8 August 2008:
Hi
great job, but there is small bug in dayNames array:
dayNames: [
“Sun”, “Mon”, “Tue”, “Wed”, “Thr”, “Fri”, “Sat”,
“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”
]
The short name for thursday should be “Thu”.
Regards.
Comment by Steven Levithan on 8 August 2008:
@ArunB, this function only returns a string; never a Date object. The input strings it can interpret as a date are only those supported by JavaScript’s native Date.parse (which doesn’t support the format you specified). In any case, there is a lot of variety in the formats that are considered ISO formatted date strings. This library includes named masks to output the most common formats.
@Tyler, good catch. Thanks. I’ve corrected the abbreviation and upped the version to 1.2.2.
Comment by pythons on 17 August 2008:
The date format method is great and has saved me a bunch of time, but I’ve just noticed that the following line causes the function to fail in firefox 3:
if (isNaN(date)) throw new SyntaxError(“invalid date”);
Has anyone else noticed this?
i.e.
alert(cs_formatDate(‘2008-08-15 15:30:11’));
Comment by pythons on 17 August 2008:
Please ignore my ignorance regarding the above, it turns out that the dashes in the date weren’t ALL being replaced (for forward slashes) prior to being passed to objDate.format(), so absolutely nothing to do with the script… ahem.. cough!
The date format script is great! Many thanks!
Comment by Minh Tran on 20 August 2008:
Thanks so much. Cool script.
Comment by Pakwizz on 21 August 2008:
Thanks bro, an excellent script
Comment by robust on 22 August 2008:
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
Comment by jweyrich on 9 September 2008:
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
Pingback by Javascript, Dates, Times, and One Man’s Dream on 16 September 2008:
[…] if you work with Javascript and need to use dates/times, you should absolutely check out a JS library for formatted dates and times by Steven Levithan (who is obviously cool; his blog is titled “Flagrant […]
Comment by Felix on 23 September 2008:
Thanks a lot for this. Worked perfectly out of the box, saved me lots of time. 🙂
-felix
Comment by Veli on 5 October 2008:
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.
Comment by Steven Levithan on 5 October 2008:
@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.
Comment by abced on 9 October 2008:
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
Comment by Giv on 15 October 2008:
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
Comment by Stilgar on 20 October 2008:
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:)
Comment by Kirkland on 25 October 2008:
Thanks, just what i wanted.
Comment by Anthony on 28 October 2008:
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?
Comment by Anthony on 28 October 2008:
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.
Comment by VijayaKumari on 29 October 2008:
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.
Comment by Steven Levithan on 29 October 2008:
@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 usenew 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).Comment by Anthony on 29 October 2008:
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.
Comment by Steven Levithan on 30 October 2008:
@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 thedateFormat.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
Comment by Anthony on 5 November 2008:
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.
Comment by Anthony on 5 November 2008:
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)
}
Comment by Anthony on 7 November 2008:
OK, I have it all working now. Thanks for you help, Steven.
Comment by MG on 7 November 2008:
Does this work with Mac?
Comment by MG on 7 November 2008:
Sorry my bad, it works.
Comment by PA on 16 November 2008:
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=”>( –
Comment by PA on 16 November 2008:
Oops, filtered:
<?
var xmlContent = crawler.getXML("http://somewhere.com/rss.xml");
for each(story in xmlContent.channel.item){
?>
<li><a href='<?=story.link?>’>[?=story.title?></a><br>(<?=story.pubDate?>)</li>
Comment by SYD on 25 November 2008:
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.
Comment by num on 27 November 2008:
Fantastic script!
This will need to be made a jQuery plugin!
Comment by GSMacLean on 2 December 2008:
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.
Comment by GSMacLean on 2 December 2008:
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;
Comment by Mandy Grifin on 30 December 2008:
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 ?
Comment by Jerry Cheung on 11 January 2009:
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.
Comment by Mike Tannel on 17 January 2009:
Very nice – Thank you.
Pingback by Need Javascript for mm/dd/yyyy format | keyongtech on 18 January 2009:
[…] for this, so you’ll need to roll your own. There are hundreds of examples on the web – GIYF – e.g. https://blog.stevenlevithan.com/archi…te-time-format However, a *much* better solution is to provide a date picker so that you never need to worry […]
Comment by Arun on 19 January 2009:
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?
Comment by chris hough on 3 February 2009:
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.
Comment by Satish Sharma on 13 February 2009:
Really Gr8!!
Very nice thing…very easy to implement.
Comment by do@candida diet on 18 February 2009:
I was searching up and down for date format and validation in javascript and found your post. It’s really helpful. Thanks a lot.
Pingback by Forcing jQuery UI DatePicker to Always open on Today’s Date | TopicObserver.com on 23 February 2009:
[…] Note: for formatting of JavaScript dates, I’ve used date.format.js from stevenlevithan.com. […]
Comment by bashan on 25 February 2009:
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.
Comment by Steven Levithan on 26 February 2009:
@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.
Comment by Bhaskar Rabha on 28 February 2009:
According to me the following also will work for get day of the week:
var mydate = new Date();
var myweekday= mydate.getDay();
alert(myweekday);
Comment by Paulo Vale on 28 February 2009:
Good work. Thanks.
Pingback by Trabalhando com data em javascript « ZP3 on 4 March 2009:
[…] https://blog.stevenlevithan.com/archives/date-time-format […]
Comment by Kelly on 11 March 2009:
Awesome – exactly what I needed….saving me some time. Thanks!
Comment by Scott Elkin on 11 March 2009:
Wow, this is really generous. Works GREAT!
Comment by sangam uprety on 12 March 2009:
This is great to have this full post. This really will be a reference for all the developers. In asp.net also javascript date validation is important, although there exists use of validators also. Here goes one such implementation using javascript:
http://dotnetspidor.blogspot.com/2009/03/using-javascript-for-validation-of.html
Thanks.
Comment by Steve B on 17 April 2009:
Thanks for posting this Steve. I am awestruck.
Pingback by vForums Blog » Blog Archive » Javascript Based Dates on 24 April 2009:
[…] functionality has been built on top of Steven Levithans Date Format class. Our version will extend it a little to allow the use of “Today” and […]
Comment by khela on 27 April 2009:
Hi, if i want to return only true or false (for validation), is possible?
Comment by Peter on 30 April 2009:
Fantastic script. Just used it in my little hobby project. Thanks!!!
Comment by Mitesh Darji on 2 May 2009:
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,