24/August/2016 12:44 AM Not valid in Safari on Mac

Question

I have done quite a bit to make sure the date my date picker creates is compatible for being converted into a javascript Date object. I followed the advice on this stack overflow entry: Invalid date in safari and removed dashes from the string using: new Date('24-August-2016 12:44 AM'.replace(/-/g, "/")); That made things compatible with every other operating system and browser, except browsers on a Mac. It still seems safari does not like the full month name in the string. What is the recommended approach to getting safari to recognize the string as a date if I am forced to use that format?

Answer 1

Read the documentation about Date():

new Date(dateString)

String value representing a date. The string should be in a format recognized by the Date.parse() method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).

Also note the following which means that you have to be extra-careful when doing this.

Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.

See the documentation of Date.parse where it clearly states which date formats are accepted:

A string representing an RFC2822 or ISO 8601 date (other formats may be used, but results may be unexpected).

The format you try to parse is neither of the supported ones and you have to expect different behaviours in different browsers.

Personally, I always use dates in the ISO 8601 format (e.g. 2016-06-16T06:15:24.040Z). Using such a standard also supports adding a timezone which is crucial in multi-timezone applications.

Oh and by the way: It is generally a bad idea to add localized date strings to a JavaScript method. The user's browser might use another language than English which, in addition of the strange date format, may also cause further problems.

Answer 2

I up voted both answers. I chose yours (som) as the accepted answer because it provides a solution. I went with solving the problem with moment.js. moment.js is able to take the string as is and return a valid date object. I ended up with something like this:

     if (typeof service.trade.onlineEndTime == 'string'){
                  if(!moment(service.trade.onlineEndTime, moment.ISO_8601, true).isValid()){
                    service.trade.onlineEndTime = service.trade.onlineEndTime.replace(/-/g,'/');  // replaces all occurances of "-" with "/"
                    service.trade.onlineEndTime = moment(service.trade.onlineEndTime, 'DD/MMMM/YYYY hh:mm a');
                  }
                  else{
                    service.trade.onlineEndTime = new Date(service.trade.onlineEndTime);
                  }
    } 
    if(typeof service.trade.onlineEndTime == 'number') {

                  service.trade.onlineEndTime = new Date(service.trade.onlineEndTime);
    }

Answer 3

Try formatting with a space instead of a dash or slash - it should work across all modern browsers (including IE and Safari):

var dateString = '24/August/2016 12:44 AM',
    dateFormatted = dateString.replace(/\//g, ' '),
    date = new Date( dateFormatted );

---

A minor gotcha:

If no timezone if specified in dateString it will default to the user's current timezone. This may not be a problem for your use case, however if someone in Ireland runs the code above they will get a different timestamp to someone in Mexico using the same code.

// defaults to the user's timezone (in my case AEST)
console.log(date); // "Wed Aug 24 2016 00:44:00 GMT+1000 (AEST)"

You can get around this by appending a timezone:

var date = new Date( dateFormatted + ' GMT' );

// timezone is now relative to GMT
console.log(date); // "Wed Aug 24 2016 10:44:00 GMT+1000 (AEST)"