How to force Date constructor to accept format on IE

Question

I have an API that provides date in the following format:

yyyy-MM-dd'T'HH:mm:ssZ, which is something like, for instance: 2017-04-18T11:18:05-0300. Chrome can build a date from such a string, but IE can't. Is there a way I can force IE to accept this format as well, what looks the most easy way to fix this problem?

I tried something like the snippet below but it didn't work

(function() {

var originalDateFn = Date;

var month_names_short =  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Date = function(date) {
   var splitted = splitIfOnApiFormat(date);
   if(splitted !== null) {
     return new Date( month_names_short[splitted[2]] + ' ' +  splitted[3] + ' ' +  splitted[1] + ' ' + splitted[4] +' GMT'+ splitted[5]);
   }
   return originalDateFn(date);
};

function splitIfOnApiFormat(date) {
  return typeof date === 'string' && date.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}\:\d{2}\:\d{2})([-+]\d{4})$/);
}



})();

Answer 1

The problem in this case is the missing : between hours and minutes in the offset part at the end. In this regard, IE is within its rights to report this as an invalid date, since it does not conform with the definition of date in the spec, which is YYYY-MM-DDTHH:mm:ss.sssZ or YYYY-MM-DDTHH:mm:ss.sss±hh:mm (with a colon).

You can fix this with:

const date = "2017-04-18T11:18:05-0300";

function fixDate(date) {
  return date.replace(/(\d\d)(\d\d)$/, 
    function(_, hh, mm) { return hh + ':' + mm; });
}

console.log(new Date(fixDate(date)));

Answer 2

The golden rule is to never parse strings with the built-in parser (i.e. using either the Date constructor or Date.parse). You have already broken the string into parts, so just pass them to the Date constructor and adjust for the time zone.

The following will parse an ISO 8601 extended format string as specified in ECMA-262, hopefully the comments are sufficient.

/* Parse string in ISO 8601 extended format: YYYY-MM-DDTHH:mm:ss.sssZ.
 ** Date only strings are treated as local (per ISO 8601)
 **
 ** @param {string} s - string to parse. Can be just a date, date and time,
 **                     or date, time and timezone.
 **                     Separator can be T or " " (space) 
 **                     Date string must be at least year and month: YYYY-MM 
 **                     All time parts are optional, if time provided then
 **                     date must have year, month and day.
 **                     All time parts are optional.
 **                     Timezone, if present, must be Z or z or +/-HH:mm or +/-HHmm
 **
 ** @returns {Date}   - if s is a invalid date, contains invalid values,
 **                     or is an invalid format, returns an invalid Date
 */
function parseISO(s) {

  // Create base Date object
  var date = new Date();
  date.setHours(12, 0, 0, 0);
  var invalidDate = new Date(NaN);

  // Set some defaults
  var sign = -1,
    tzMins = 0;
  var tzHr, tzMin;

  // Trim leading and trailing whitespace
  s = s.replace(/^\s*|\s*$/g, '').toUpperCase();

  // Get parts of string and split into numbers
  var d = (s.match(/^\d+(-\d+){0,2}/) || [''])[0].split(/\D/);
  var t = (s.match(/[\sT]\d+(:\d+){0,2}(\.\d+)?/) || [''])[0].split(/\D/);
  var tz = (s.match(/Z|[+\-]\d\d:?\d\d$/) || [''])[0];

  // Resolve timezone to minutes, may be Z, +hh:mm or +hhmm
  // substr is old school but more compatible than slice
  // Don't need to split into parts but makes validation easier
  if (tz) {
    sign = /^-/.test(tz) ? 1 : -1;
    tzHr = tz == 'Z' ? 0 : tz.substr(1, 2);
    tzMin = tz == 'Z' ? 0 : tz.substr(tz.length - 2, 2) * 1;
    tzMins = sign * (tzHr * 60 + tzMin);
  }

  // Validation
  function isLeap(year) {
    return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
  }

  // Check number of date parts and month is valid
  if (d.length > 3 || d[1] < 1 || d[1] > 12) return invalidDate;

  // Test day is valid
  var monthDays = [, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  var monthMax = isLeap(d[0]) && d[1] == 2 ? 29 : monthDays[+d[1]];
  if (d[2] < 1 || d[2] > monthMax) return invalidDate;

  // Test time parts
  if (t.length > 5 || t[1] > 23 || t[2] > 59 || t[3] > 59 || t[4] > 999) return invalidDate;

  // Test tz within bounds
  if (tzHr > 12 || tzMin > 59) return invalidDate;

  // If there's a timezone, use UTC methods, otherwise local
  var method = tz ? 'UTC' : '';

  // Set date values
  date['set' + method + 'FullYear'](d[0], (d[1] ? d[1] - 1 : 0), d[2] || 1);
  // Set time values - first memeber is '' from separator \s or T
  date['set' + method + 'Hours'](t[1] || 0, (+t[2] || 0) + tzMins, t[3] || 0, t[4] || 0);

  return date;
}

// Some tests
['2017-04-18T11:18:05-0300',  // No colon in timezone
  '2017-04-18 11:18:05-0300', // Space separator instead of T
  '2016-04-12T04:31+05:30',   // Colon in timezone
  '2016-02-29T04:31+05:30',   // Colon, leap year
  '2016-04-12T04:31:56.004Z', // GMT
  '2000-02-29T04:31+05:30',   // Colon, leap year
  '1900-02-29T04:31+05:30',   // Colon, not leap year (invalid date)
  '2016-04-12T04:31:56.004',  // Local
  '2016-04-12',               // Date only (local)
  '2016-04'                   // Minimal date (local)
].forEach(function(d) {
  console.log(d + ': ' + parseISO(d).toString());
});

Alternatively, use a library, there are plenty of good ones to choose from.

Answer 3

OK, got it For anyone else who may need, the following code fixed it:

(function() {

var originalDateFn = Date.prototype.constructor;

var month_names_short =  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Date = function(date) {
   var splitted = splitIfOnApiFormat(date);
   if(splitted !== null) {
     return new originalDateFn( month_names_short[(Number(splitted[2])) -1] + ' ' +  splitted[3] + ' ' +  splitted[1] + ' ' + splitted[4] +' GMT'+ splitted[5]);
   }
   return new originalDateFn(date);
};

function splitIfOnApiFormat(date) {
  return typeof date === 'string' ? date.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}\:\d{2}\:\d{2})([-+]\d{4})$/) : null;
}



})();