在Mozilla Firefox中使用moment.js时获取无效的日期

Question

i'm currently using moment.js library to render dates in real time to my users, but after some tests today, i noticed something really weird, when listing all possible days to the user in Firefox, moment.js fails to add days in the date '2015-09-14'. After searching the developers documentation and the internet, i discovered that you have to pass a ISO8601 valid Date or construct by passing explicit information of the date, but the results continue to confuse me.

Here's some code for understanding:

Working case (creating a moment() instance from current time):

var printVar = moment();
var divInfo  = document.getElementById('calendars');
divInfo.innerHTML += "<ul>";

for(var i=0; i<40; i++){
    divInfo.innerHTML += "<li> " + printVar.format('DD/MM/YYYY') + " </li>";            
    printVar = moment(printVar).add(1, 'days');
}

divInfo.innerHTML += "</ul>";

My Result:

• 15/10/2015
• 16/10/2015
• 17/10/2015
• 18/10/2015
• 19/10/2015
• 20/10/2015

Weird case #1 (creating a moment() using time with encoding 'YYYY-MM-DD'):

var printVar = moment('2015-09-14');

var divInfo  = document.getElementById('calendars');
divInfo.innerHTML += "<ul>";

for(var i=0; i<40; i++){
    divInfo.innerHTML += "<li> " + printVar.format('DD/MM/YYYY') + " </li>";            
    printVar = moment(printVar).add(1, 'days');
}

divInfo.innerHTML += "</ul>";

My Result:

• 15/10/2015
• 16/10/2015
• 17/10/2015
• 17/10/2015
• 18/10/2015
• 19/10/2015

Weird case #2 (creating a moment() using explicit constructor like moment([2015, 8, 14])) return the same result:

• 15/10/2015
• 16/10/2015
• 17/10/2015
• 17/10/2015
• 18/10/2015
• 19/10/2015

Firefox version: 40.0.3

Thanks for all the Help!

Answer 1

You must be in Brazil!

• Brazil "springs-forward" for daylight saving time at midnight on October 18, 2015. That is, the clocks tick from 2015-10-17T23:59:59.999 to 2015-10-18T01:00:00.000 . There is no midnight on this day in your time zone!

• Moment still uses the Date object for certain operations internally.

• The Date object is implemented differently on different browsers when it comes to DST transition edge cases, such as dealing with invalid or ambiguous values.

• Firefox happens to shift backwards by an hour when you provide an invalid value. Other browsers such as Chrome shift forwards (which is more sensible IMHO).

Consider that with my time zone set for Brazil where DST occurs (Brasillia, Sao Paulo, etc.):

In FireFox:

But in Chrome:

Notice that by shifting backwards instead of forwards, the dates for the middle two values are off by one.

To be clear, this is a browser issue - not a moment issue. Similar results can be obtained by just using the Date object. Moment could detect this issue and compensate, but it currently does not.

The workaround to get consistent behavior (with Date or with moment ) is to use noon when working with date-only values. DST transitions always occur at night, so noon is a safer value to use than midnight.

Firefox:

Chrome:

Answer 2

instead of

printVar = moment(printVar.format()).add(1, 'days');

just do

printVar.add(1, 'days');

Example code:

 var printVar, divInfo, i; printVar = moment(); divInfo = document.getElementById('example-1'); divInfo.innerHTML += "<ul>"; for(i=0; i<10; i++){ divInfo.innerHTML += "<li> " + printVar.format('DD/MM/YYYY') + " </li>"; printVar.add(1, 'days'); } divInfo.innerHTML += "</ul>"; printVar = moment('2015-9-10'); divInfo = document.getElementById('example-2'); divInfo.innerHTML += "<ul>"; for(i=0; i<10; i++){ divInfo.innerHTML += "<li> " + printVar.format('DD/MM/YYYY') + " </li>"; printVar.add(1, 'days'); } divInfo.innerHTML += "</ul>"; printVar = moment([2015, 8, 14]); divInfo = document.getElementById('example-3'); divInfo.innerHTML += "<ul>"; for(i=0; i<10; i++){ divInfo.innerHTML += "<li> " + printVar.format('DD/MM/YYYY') + " </li>"; printVar.add(1, 'days'); } divInfo.innerHTML += "</ul>"; 

 div { margin-top: 20px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/af.js"></script> <div id="example-1"></div> <div id="example-2"></div> <div id="example-3"></div>