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!

  • Interesting bug, but you definitely should create an Issue on github.. looks really weird – webdeb Sep 14 '15 at 21:12
up vote 2 down vote accepted

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:

  • That's it!! thank you! – Luis Otávio Sep 18 '15 at 14:20

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>

  • Already did it :/ When passing with a format to the variable, i get a even weirder result like this: 15/10/2015, 16/10/2015, 17/10/2015, 17/10/2015, 17/10/2015, 17/10/2015. – Luis Otávio Sep 15 '15 at 12:31
  • I guess, I got it, will update the answer – webdeb Sep 15 '15 at 17:59

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.