JavaScript Date Format

374 thoughts on “JavaScript Date Format”

1. 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. 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. Also, I love the name of you blog. LOL! :o)

4. @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. @Steve,

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

   Cheers,
   Chris

6. 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. 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. 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. 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. 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. 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. 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. @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. 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. “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. Hi Steve, Scott,

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

    Thanks,
    Cynthia.

17. 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. 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. @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. 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. 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. 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. 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. 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: Date Format 1.0

26. 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. 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. @Pipnaintez, I can’t reproduce the problem you mention. “mm” returns months, and “MM” returns minutes, like the docs say.

29. 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. 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. 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.

32. Good job Steven,

    Was very much helpful.

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

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

35. Very nice work, thanks! I will try to create a version with syntax closer to the Java Date class.

36. 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

37. 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…)

38. Oups I forgot that date is “18-06-2008”

39. @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 limited Date.parse. You’ll need to either use a string that the parse method recognizes, or create the date using the Date constructor (e.g., new Date(year, month, date)).

40. 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.

41. 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?

42. @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 with d. 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’s Date.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).

43. Here’s a complete list of time zone abbreviations.
    http://www.timeanddate.com/library/abbreviations/timezones/
    There are quite a few overlaps.

44. OMG… such a simple mod!!! Where were you when they created this abomination called Javascript!!!

45. Can I convert ISO formatted date(string) ex: 2008-08-08T10:10+00:00 to a Date object using dateFormat?

46. 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.

47. @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.

48. 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’));

49. 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!

50. Thanks so much. Cool script.