date() function returning Invalid Date in Safari a

问题:

I am formatting a date in the following way:

date = new Date("2013-05-12 20:00:00");
formattedDate = new Date(date.getFullYear(),date.getMonth(),date.getDate());

When I run this in Chrome it outputs:

Sun May 12 2013 00:00:00 GMT-0700 (PDT)

Which is what I need, however when I run this in Firefox or Safari I get

Invalid Date

Can any one suggest a workaround for this. Extra points if it doesn't require a library, regex or string manipulation.

回答1:

While the value 2013-05-12 20:00:00 is one several valid formats specified by ISO8601, it is best to use the profile defined in RFC3339, which is a sub-set of ISO8601.

This means that you should have both the T separator, and a time zone offset - which can be numeric or Z to specify UTC. In other words, you should use a value like 2013-05-12T20:00:00-07:00, or the equivalent 2013-05-13T03:00:00Z.

Now whether you have a correctly formatted input value or not, then the issue of browser compatibility comes up. All modern browsers support ISO8601, but some interpret it differently. For example, in Google Chrome, if you omit the T it is parsed as local time even if there is a Z at the end. In Internet Explorer, the same value with the T omitted returns an invalid date error.

A better approach is to use a library that abstracts these differences away, so you can focus on your application and not the quirks of the browser. The best library I know of for this is moment.js. In addition to full support for ISO dates, you can parse input in any way that you want with custom format strings. It has lots of other features as well. I highly encourage you to take a look.

Using moment.js, you can do the following:

// from a full date-time-offset ISO8601/RFC3339 value
var m = moment('2013-05-12T20:00:00-07:00');

// or from your custom value, with explicit formatting
// this will assume the local time zone because you didn't specify one
var m = moment('2013-05-12 20:00:00','YYYY-MM-DD HH:mm:ss');

// then you can output it in a custom format if you like
m.format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, May 12th 2013, 8:00:00 pm"

As far as I know, moment.js works in all browsers - including older ones like IE6.

回答2:

Your date format is not standard for some browsers. To parse custom date time formats you can split it to separate values and use another Date constructor that accepts year, month, day, hours, minutes, seconds and is cross browser compliant. For your case it will be something like this:

var date = "2013-05-12 20:00:00",
    values = date.split(/[^0-9]/),
    year = parseInt(values[0], 10),
    month = parseInt(values[1], 10) - 1, // Month is zero based, so subtract 1
    day = parseInt(values[2], 10),
    hours = parseInt(values[3], 10),
    minutes = parseInt(values[4], 10),
    seconds = parseInt(values[5], 10),
    formattedDate;

formattedDate = new Date(year, month, day, hours, minutes, seconds);

Working example here http://jsbin.com/ewozew/1/edit

回答3:

I ran into this exact same issue today, do not use dashes as a seperator. This works fine in Chrome but not in Safari/iOS, replacing dashes with slashes fixes this issue. The Date function will otherwise break in Safari.

Incorrect date string with with -

The following code will return the following

new Date('03-25-2017');

Chrome:

Sat Mar 25 2017 00:00:00 GMT+0100 (CET)

Safari:

Invalid Date

So, simply replace - with /.

Correct date string with with /

The following code will return the following

new Date('03/25/2017');

Chrome:

Sat Mar 25 2017 00:00:00 GMT+0100 (CET)

Safari:

Sat Mar 25 2017 00:00:00 GMT+0100 (CET)

回答4:

I think you need a 'T' between the date and the time to get it working fully.

date = new Date("2013-05-12T20:00:00");

There are quite a few possible datetime formats allowed in the spec and I don't think all browsers offer all possibilities. For Firefox see https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/parse

To be really safe cross-browser you might want to try the RFC2822 / IETF date syntax (basically the same as Chrome spat back out at you)

回答5:

Why not hijack Date with fix-date at the beginning of your code?

import 'fix-date' // that's ok!