CODEWITHSUNDEEP
javascriptdatemomentjsdate-range
Tourshi
Tourshi

Reputation: 503

MomentJS range not always including current month in date range

For some odd reason, MomentJS range does not always display the current month. I am wondering if there is an option that needs to be set so that it includes the current month in it's date range.

This is the code used to generate the date range. I've also attached a codepen so you can see it in action.

http://codepen.io/anon/pen/rORmxY

    //momentJs creates the ranges
    //Only shows April 2015
    var end = moment("2015-05-01","YYYY-MM-DD");
    //where the day is > 18 it Shows May 2015
    var end2 = moment("2015-05-19","YYYY-MM-DD");
    var start = moment().subtract(1.5, "year");
    var range = moment.range(start, end); 
    var range2 = moment.range(start, end2); 

    //iterate through the months, and populate the SELECT box
    range.by('months', function(date) {
      //add those values to a SELECT box
      $('#month-range').prepend($('<option>', {
        value: date.format("MMM YYYY"),
        text: date.format("MMM YYYY")
      }));
    });

   //iterate through the months, and populate the SELECT box
    range2.by('months', function(date) {
      //add those values to a SELECT box
      $('#month-range2').prepend($('<option>', {
        value: date.format("MMM YYYY"),
        text: date.format("MMM YYYY")
      }));
    });

Thanks a lot

Upvotes: 0

Views: 1001

Answers (2)

Tourshi
Tourshi

Reputation: 503

The work around I've found is to simply tell momentJs to use the end of the month for the range. Which makes sense in this context. This is done by adding .endOf("month") to the end range.

See this code for clarification: 

//momentJs creates the ranges
//adding .endOf("month") will Include the month of May in the month ranges
var end = moment("2015-05-01","YYYY-MM-DD").endOf("month");
var start = moment().subtract(1.5, "year");
var range = moment.range(start, end); 

//iterate through the months, and populate the SELECT box
range.by('months', function(date) {
  //add those values to a SELECT box
  $('#month-range').prepend($('<option>', {
    value: date.format("MMM YYYY"),
    text: date.format("MMM YYYY")
  }));
});

Thanks a lot for the help

Upvotes: 2

Yu Wu
Yu Wu

Reputation: 213

Please take a look at the source code of month-range (https://github.com/gf3/moment-range/blob/master/lib/moment-range.js).

The reason that setting end date to 2015-05-18 will include one less month as 2015-05-19 is nothing special. It is because today is 2015-11-18 and you set the start date to be 2014-05-18.

Now look at _byString function in moment-range (which is called by 'by' function).

function _byString(interval, hollaback, exclusive) {
  var current = moment(this.start);

  while (this.contains(current, exclusive)) {
    hollaback.call(this, current.clone());
    current.add(1, interval);
  }
}

'current' variable starts from '2014-05-18' and increases one month at a time. If the end date is 2015-05-19, 'this.contains()' simply returns true when 'current' = '2015-05-18'. And if end date is 2015-05-19, 'this.contains' will return false. This is the reason for the behavior of your code.

Now, if you wanna always include the current month, I think you always add 1 day to the end date. However, I image this method might cause some problem for the last day of a month. Or you can always set the end date to the first day of the next month, but exclude that month. You can do some experimentation.

Hope this helps!

Upvotes: 1

Related Questions