Generate a full array of date objects

Question

The Problem

I'm using nvd3 to render some date-specific data. However, if there was no data for a particular date, no record exists for it, and nvd3 does not render that data point, instead interpolating between the data points that do exist. I therefore need to generate the missing dates so that nvd3 displays dates which had no data associated with them.

What I want to do

I need to generate an array that looks like this:

[ {year: 2015, month: 1, day: 1},
  {year: 2015, month: 1, day: 2},
  ...
]

The function generating this array will take a starting date and an ending date, and generate all days between those two dates.

I will then merge it with my data array. That way dates that have data will have data, and dates that don't have data will still show up on the graph, without skipping over any missing dates.

Is there an easy way to do this with the Date object? I.e. when generating this array I need to know which months have 30 or 31 days, that February is special, leap years, etc, etc... I could brute-force it by specifying the number of days for each month, but I'd like to know if there's any easier way to do this.

Answer 1

Try this:

function getDateArray(startDate, days){
   return Array(days)
            .fill()
            .map(function(e,idx) { 
                var d = new Date(startDate); 
                d.setDate(d.getDate() + idx); 
                return {
                    year: d.getFullYear(), 
                    month: d.getMonth() + 1, 
                    day: d.getDate() }; 
                }
             );
}

Answer 2

You don't neccessarily need to know the number of days in a particular month.

var date = new Date(2016, 0, 31);
console.log(date); // Sun Jan 31 2016 00:00:00 GMT-0600 (Central Standard Time)
date.setDate(date.getDate() + 1);
console.log(date); // Mon Feb 01 2016 00:00:00 GMT-0600 (Central Standard Time)

You could iterate a Date until you want to get to the end point.

See this question: Incrementing a date in JavaScript

---

Edit

I felt bad that I didn't include an implementation, so here is my way, which is slightly similar to Malk's answer except it uses String.repeat() instead of the Array constructor which keeps jslint from complaining and returns a Date object instead of an Object literal. String.repeat() isn't supported by IE either.

/*jslint node:true*/

"use strict";

/*
 * Function to fill a series of dates
 * @param {Date} start The staring date
 * @param {Number} n The number of days to fill out
 * @returns {Date[]} The Date objects of the series
 */
function fillDateSeries(start, n) {
    return "#".repeat(n).split("").map(function (e, i) {
        var date = new Date();
        date.setDate(start.getDate() + i);
        return date;
    });
}

// Usage
console.log(fillDateSeries(new Date(), 5));

Prints:

[ Mon Feb 01 2016 18:24:29 GMT-0600 (Central Standard Time),
  Tue Feb 02 2016 18:24:29 GMT-0600 (Central Standard Time),
  Wed Feb 03 2016 18:24:29 GMT-0600 (Central Standard Time),
  Thu Feb 04 2016 18:24:29 GMT-0600 (Central Standard Time),
  Fri Feb 05 2016 18:24:29 GMT-0600 (Central Standard Time) ]

Answer 3

Just as an alternative, you can do this purely with numbers and strings, there's no need for Date objects. It should be more efficient, but of course only testing will tell.

// Start is a date string in y-m-d format     
function genDates(start, count) {
  var dates = [];
  var d = start.split('-').map(Number);
  var monthLength = [,31,28,31,30,31,30,31,31,30,31,30,31];

  // Return true if year is a leap year
  function isLeap(year) {return !(year % 4) && !!(year % 100) || !(year % 400)}

  // Add one day to date array [year,month,day]
  function addDay(d){
    ++d[2];

    // Deal with possible leap year first
    if (isLeap(d[0]) && d[1] == 2 && d[2] <= 29) return d;

    // If day is too big, increment month and reset day
 if (d[2] > monthLength[d[1]]) {
   d[2] = 1;
   ++d[1];
 }

    // If month is too big, increment year and reset month
 if (d[1] > 12) {
   d[1] = 1;
   ++d[0];
 }
 return d;
  }
  while (count--) {
    dates.push({year:d[0], month:d[1], day:d[2]});
 addDay(d);
  }
  return dates;
}     

document.write(JSON.stringify(genDates('2000-02-27', 5)));

Answer 4

It isn't hard iterating over dates to create the range array yourself. You can easily use date.setDate(date.getDate() +1), as zero298 suggested.

I've created a simple example, I think it's a pretty straight forward solution.

function date_range(from, to) {
    if (to instanceof Date === false)
        to = new Date();
    if (from instanceof Date === false || from > to)
        from = to;

    var results = [];
    while (from.getTime() !== to.getTime()) {
        results.push(date_to_object(from));
        from.setDate(from.getDate() +1);
    }
    results.push(date_to_object(to));
    return results;
}

function date_to_object(date) {
    return {
        year: date.getFullYear(),
        month: date.getMonth() +1,
        day: date.getDate()
    };
}

Code example

Answer 5

You could try something like this:

function dateIntervalFormatter(fromDate, toDate){
    var formatedInterval = [];
    while(fromDate<=toDate){
      formatedInterval.push({
        year: fromDate.getFullYear(),
        month: fromDate.getMonth(),
        day: fromDate.getDate()
      });
      fromDate.setDate(fromDate.getDate()+1);
    };
  return formatedInterval;
}

Answer 6

You could try something like this using a template.

And pushing that to an array with a for loop until then end date is reached. incrementing the day every loop.