Parsing ISO 8601 date in JavaScript

Question

I need help/tips on converting an ISO 8601 date with the following structure into JavaScript:

CCYY-MM-DDThh:mm:ssTZD

I'd like to format the date like so:

January 28, 2011 - 7:30PM EST

I'd like to keep this solution as clean and minimal as possible.

Mycostatin

I know this is an old post, but this library does what you want: github.com/csnover/js-iso8601 – Spermatophore

Answer 1

datejs could parse following, you might want to try out.

Date.parse('1997-07-16T19:20:15')           // ISO 8601 Formats
Date.parse('1997-07-16T19:20:30+01:00')     // ISO 8601 with Timezone offset

Edit: Regex version

x = "2011-01-28T19:30:00EST"

MM = ["January", "February","March","April","May","June","July","August","September","October","November", "December"]

xx = x.replace(
    /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):\d{2}(\w{3})/,
    function($0,$1,$2,$3,$4,$5,$6){
        return MM[$2-1]+" "+$3+", "+$1+" - "+$4%12+":"+$5+(+$4>12?"PM":"AM")+" "+$6
    }
)

Result

January 28, 2011 - 7:30PM EST

Edit2: I changed my timezone to EST and now I got following

x = "2011-01-28T19:30:00-05:00"

MM = {Jan:"January", Feb:"February", Mar:"March", Apr:"April", May:"May", Jun:"June", Jul:"July", Aug:"August", Sep:"September", Oct:"October", Nov:"November", Dec:"December"}

xx = String(new Date(x)).replace(
    /\w{3} (\w{3}) (\d{2}) (\d{4}) (\d{2}):(\d{2}):[^(]+\(([A-Z]{3})\)/,
    function($0,$1,$2,$3,$4,$5,$6){
        return MM[$1]+" "+$2+", "+$3+" - "+$4%12+":"+$5+(+$4>12?"PM":"AM")+" "+$6 
    }
)

return

January 28, 2011 - 7:30PM EST

Basically

String(new Date(x))

return

Fri Jan 28 2011 19:30:00 GMT-0500 (EST)

regex parts just converting above string to your required format.

January 28, 2011 - 7:30PM EST

Cresa

I'm making a widget and would prefer if I could just have a simple function which I could throw in my JS file. I think datajs might be overkill for this? Thanks for the suggestion and quick reply!! – Mycostatin

@Slythic, I will write regex then, pls hold on. – Cresa

@Slythic, Updated, let me know if there is any bug. – Cresa

Hmm... not working as expected. I should have added this before! Here is an example of a returned date: "2011-01-28T19:30:00-05:00" – Mycostatin

ah, ok, timezone is not a string, let me figure out, how to parse that. – Cresa

@Slythic, looks like converting -05:00 to EST hard to be done, because javascript run on local, built-in Date() function returns my time zone JST instead of EST, so probably might need to embed timezone info in the codes. and looks like datejs library also hard coding partial timezone data here (Look for timezone) – Cresa

S.Mark - Thanks so much for giving it a try! I know this script DOES format the EST. Any clues in it that can help you figure it out? n8v.enteuxis.org/2010/12/parsing-iso-8601-dates-in-javascript – Mycostatin

@Slythic, It gave me parseISO8601Date("2011-01-28T19:30:00-05:00" ) Fri Jan 28 2011 23:30:00 GMT+0900 (JST) I think you're in EST timezone, so thats why probably giving you EST. But, If you are ok with local timezone setting I could change my regex to make that work (it will give you EST, but for me it will return JST). – Cresa

Getting an 'Invalid Date'. I pretty much copied and pasted your second edit like I did your first edit. Able to make your first edit work but not the second edit. Trying to figure out what I'm missing... – Mycostatin

This is how my function currently looks: function parseISO8601(s) { x = "2011-01-28T19:30:00-05:00" MM = {Jan:"January", Feb:"February", Mar:"March", Apr:"April", May:"May", Jun:"June", Jul:"July", Aug:"August", Sep:"September", Oct:"October", Nov:"November", Dec:"December"} xx = String(new Date(x)).replace( /\w{3} (\w{3}) (\d{2}) (\d{4}) (\d{2}):(\d{2}):[^(]+\(([A-Z]{3})\)/, function($0,$1,$2,$3,$4,$5,$6){ return MM[$1]+" "+$2+", "+$3+" - "+$4%12+":"+$5+(+$4>12?"PM":"AM")+" "+$6 } ) } – Mycostatin

@Slythic, could u do alert(String(new Date("2011-01-28T19:30:00-05:00"))) in your script? and let me know the output? – Cresa

S.Mark: UPDATE!! I only get 'Invalid Date' in Safari... Firefox seems to work fine! – Mycostatin

I see @Slythic, probably, might need to manually parse as your link. Problem now is I don't understand well those calculations. – Cresa

Thanks for all your hard work. Just wish it would work as I had in mind. Thanks again! – Mycostatin

Safari does not support passing an ISO date to the Date constructor. Go figure. – Cloth

Answer 2

The Date object handles 8601 as its first parameter:

var d = new Date("2014-04-07T13:58:10.104Z");
console.log(d.toString());

Pannikin

Not in all browsers. Keep in mind, ECMA specification was or still is vague about the parameter format of Date(). That's why even IE11 can't handle what you are suggesting. – Valediction

@RenéStalder I actually just tested this in IE11 and it works. Did you test in other IE versions? – Pannikin

@RenéStalder Just tested in IE9 on Win7 too and it works there as well. In fact so far I haven't found a single browser that doesn't support it. – Pannikin

Well, as said, it differs, depending on the string format you are using. It might be possible that some work in some browsers, some others work in some other browsers. Because the specification isn't clear enough. See https://mcmap.net/q/112430/-javascript-which-browsers-support-parsing-of-iso-8601-date-string-with-date-parse for another example. – Valediction

This answer is beautiful, simple, and correct. This even prints the time adjusted to the local time of the user. Doing anything else is silly! (edit: I am using jQuery if that changes anything for those who come after.) – Beverlee

Doesn't work in IE 9: Quirks mode for sure. Some of us need browser compatability. – Bini

It has strange behavior in the latest Chome: the timezone of the resulting Date object is converted to local time zone. I.e. in my current timezine new Date("2015-10-24T08:00:00") = Sat Oct 24 2015 16:00:00 GMT+0800 – Traumatize

Date parsing is implementation dependent until ES5. Old browsers will display inconsistent results. – Unsavory

Thanks, this is the solution that allowed me tu use getHours, e.g var h = new Date("2014-04-07T13:58:10.104Z").getHours(); – Haemolysis

Best answer. For those who need browser compatibility before IE9, github.com/csnover/js-iso8601 – Sension

quote from Mozilla: "Parsing of date strings with the Date constructor (and Date.parse(), which works the same way) is strongly discouraged due to browser differences and inconsistencies." – Magma

@Magma its true that is written. The testable objective reality is that if you pass the format I quoted above, the output is consistent in all the browsers people use today. – Pannikin

ES6 explicitly supports ISO 8601 dates, so this is the right approach unless you need to support legacy browsers. – Deltoro

Answer 3

If you want to keep it simple, this should suffice:

function parseIsoDatetime(dtstr) {
    var dt = dtstr.split(/[: T-]/).map(parseFloat);
    return new Date(dt[0], dt[1] - 1, dt[2], dt[3] || 0, dt[4] || 0, dt[5] || 0, 0);
}

note parseFloat is must, parseInt doesn't always work. Map requires IE9 or later.

Works for formats:

• 2014-12-28 15:30:30
• 2014-12-28T15:30:30
• 2014-12-28

Not valid for timezones, see other answers about those.

Trude

+1 simple and portable. I made this change to interpret dates as UTC: return new Date(Date.UTC(dt[0], dt[1] - 1, dt[2], dt[3] || 0, dt[4] || 0, dt[5] || 0, 0)); – Donne

Very nice little function that handles the most important part: fixing that dang month index. – Novena

Sigh, IE11 Enterprise (basically IE8) doesn't support map. Groan – Divergency

Found a polyfill and it's all working for IE8 too (just change .map to .myMap): Array.prototype.myMap = function(callbackFn) { var arr = []; for (var i = 0; i < this.length; i++) { arr.push(callbackFn(this[i], i, this)); } return arr; } – Divergency

To get the timezone with this approach, you can take the return of the above function (call it "d"), and run it through toLocaleTimeString(): d.toLocaleTimeString([], { month: 'long', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: 'America/Chicago', timeZoneName: 'short' }) This converts the date string 2022-10-03T14:43:51.000000Z> to October 3, 2022 at 2:43 PM CDT – Dutiful

Answer 4

Maybe, you can use moment.js which in my opinion is the best JavaScript library for parsing, formatting and working with dates client-side. You could use something like:

var momentDate = moment('1890-09-30T23:59:59+01:16:20', 'YYYY-MM-DDTHH:mm:ss+-HH:mm:ss');
var jsDate = momentDate.toDate();

// Now, you can run any JavaScript Date method

jsDate.toLocaleString();

The advantage of using a library like moment.js is that your code will work perfectly even in legacy browsers like IE 8+.

Here is the documenation about parsing methods: https://momentjs.com/docs/#/parsing/

Hydrate

Moment is now in legacy mode and has been replaced by luxon and/or standard JS – Popularly

Answer 5

According to MSDN, the JavaScript Date object does not provide any specific date formatting methods (as you may see with other programming languages). However, you can use a few of the Date methods and formatting to accomplish your goal:

function dateToString (date) {
  // Use an array to format the month numbers
  var months = [
    "January",
    "February",
    "March",
    ...
  ];

  // Use an object to format the timezone identifiers
  var timeZones = {
    "360": "EST",
    ...
  };

  var month = months[date.getMonth()];
  var day = date.getDate();
  var year = date.getFullYear();

  var hours = date.getHours();
  var minutes = date.getMinutes();
  var time = (hours > 11 ? (hours - 11) : (hours + 1)) + ":" + minutes + (hours > 11 ? "PM" : "AM");
  var timezone = timeZones[date.getTimezoneOffset()];

  // Returns formatted date as string (e.g. January 28, 2011 - 7:30PM EST)
  return month + " " + day + ", " + year + " - " + time + " " + timezone;
}

var date = new Date("2011-01-28T19:30:00-05:00");

alert(dateToString(date));

You could even take it one step further and override the Date.toString() method:

function dateToString () { // No date argument this time
  // Use an array to format the month numbers
  var months = [
    "January",
    "February",
    "March",
    ...
  ];

  // Use an object to format the timezone identifiers
  var timeZones = {
    "360": "EST",
    ...
  };

  var month = months[*this*.getMonth()];
  var day = *this*.getDate();
  var year = *this*.getFullYear();

  var hours = *this*.getHours();
  var minutes = *this*.getMinutes();
  var time = (hours > 11 ? (hours - 11) : (hours + 1)) + ":" + minutes + (hours > 11 ? "PM" : "AM");
  var timezone = timeZones[*this*.getTimezoneOffset()];

  // Returns formatted date as string (e.g. January 28, 2011 - 7:30PM EST)
  return month + " " + day + ", " + year + " - " + time + " " + timezone;
}

var date = new Date("2011-01-28T19:30:00-05:00");
Date.prototype.toString = dateToString;

alert(date.toString());

Presto