Loop through a date range with JavaScript

JavascriptLoopsDateIterationDate Range

Javascript Problem Overview


Given two Date() objects, where one is less than the other, how do I loop every day between the dates?

for(loopDate = startDate; loopDate < endDate; loopDate += 1)
{

}

Would this sort of loop work? But how can I add one day to the loop counter?

Thanks!

Javascript Solutions


Solution 1 - Javascript

Here's a way to do it by making use of the way adding one day causes the date to roll over to the next month if necessary, and without messing around with milliseconds. Daylight savings aren't an issue either.

var now = new Date();
var daysOfYear = [];
for (var d = new Date(2012, 0, 1); d <= now; d.setDate(d.getDate() + 1)) {
    daysOfYear.push(new Date(d));
}

Note that if you want to store the date, you'll need to make a new one (as above with new Date(d)), or else you'll end up with every stored date being the final value of d in the loop.

Solution 2 - Javascript

Based on Tom GullenĀ“s answer.

var start = new Date("02/05/2013");
var end = new Date("02/10/2013");


var loop = new Date(start);
while(loop <= end){
   alert(loop);           

   var newDate = loop.setDate(loop.getDate() + 1);
   loop = new Date(newDate);
}

Solution 3 - Javascript

I think I found an even simpler answer, if you allow yourself to use Moment.js:

// cycle through last five days, today included
// you could also cycle through any dates you want, mostly for
// making this snippet not time aware
const currentMoment = moment().subtract(4, 'days');
const endMoment = moment().add(1, 'days');
while (currentMoment.isBefore(endMoment, 'day')) {
  console.log(`Loop at ${currentMoment.format('YYYY-MM-DD')}`);
  currentMoment.add(1, 'days');
}

<script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script>

Solution 4 - Javascript

If startDate and endDate are indeed date objects you could convert them to number of milliseconds since midnight Jan 1, 1970, like this:

var startTime = startDate.getTime(), endTime = endDate.getTime();

Then you could loop from one to another incrementing loopTime by 86400000 (10006060*24) - number of milliseconds in one day:

for(loopTime = startTime; loopTime < endTime; loopTime += 86400000)
{
    var loopDay=new Date(loopTime)
    //use loopDay as you wish
}

Solution 5 - Javascript

Here simple working code, worked for me

var from = new Date(2012,0,1);
var to = new Date(2012,1,20);
    
// loop for every day
for (var day = from; day <= to; day.setDate(day.getDate() + 1)) {
      
   // your day is here

}

Solution 6 - Javascript

var start = new Date("2014-05-01"); //yyyy-mm-dd
var end = new Date("2014-05-05"); //yyyy-mm-dd
	
while(start <= end){
	
	var mm = ((start.getMonth()+1)>=10)?(start.getMonth()+1):'0'+(start.getMonth()+1);
	var dd = ((start.getDate())>=10)? (start.getDate()) : '0' + (start.getDate());
	var yyyy = start.getFullYear();
	var date = dd+"/"+mm+"/"+yyyy; //yyyy-mm-dd
	
	alert(date); 
	
	start = new Date(start.setDate(start.getDate() + 1)); //date increase by 1
}

Solution 7 - Javascript

Based on Tabare's Answer, I had to add one more day at the end, since the cycle is cut before

var start = new Date("02/05/2013");
var end = new Date("02/10/2013");
var newend = end.setDate(end.getDate()+1);
var end = new Date(newend);
while(start < end){
   alert(start);           

   var newDate = start.setDate(start.getDate() + 1);
   start = new Date(newDate);
}

Solution 8 - Javascript

If you want an efficient way with milliseconds:

var daysOfYear = [];
for (var d = begin; d <= end; d = d + 86400000) {
    daysOfYear.push(new Date(d));
}

Solution 9 - Javascript

Let us assume you got the start date and end date from the UI and stored it in the scope variable in the controller.

Then declare an array which will get reset on every function call so that on the next call for the function the new data can be stored.

var dayLabel = [];

Remember to use new Date(your starting variable) because if you dont use the new date and directly assign it to variable the setDate function will change the origional variable value in each iteration`

for (var d = new Date($scope.startDate); d <= $scope.endDate; d.setDate(d.getDate() + 1)) {
                dayLabel.push(new Date(d));
            }

Solution 10 - Javascript

As a function,

function getDatesFromDateRange(from, to) {
  const dates = [];
  for (let date = from; date <= to; date.setDate(date.getDate() + 1)) {
    const cloned = new Date(date.valueOf());
    dates.push(cloned);
  }
  return dates;
}

const start = new Date(2019, 11, 31);
const end = new Date(2020, 1, 1);

const datesArray = getDatesFromDateRange(start, end);
console.dir(datesArray);

Solution 11 - Javascript

Didn't want to store the result in an array, so maybe using yield?

/**
 * @param {object} params
 * @param {Date} params.from
 * @param {Date} params.to
 * @param {number | undefined} params.incrementBy
 * @yields {Date}
 */
 function* iterateDate(params) {
    const increaseBy = Math.abs(params.incrementBy ?? 1);
    for(let current = params.from; current.getTime() <= params.to.getTime(); current.setDate(current.getDate() + increaseBy)) {
        yield new Date(current);
    }
}

for (const d of iterateDate({from: new Date(2021,0,1), to: new Date(2021,0,31), incrementBy: 1})) {
    console.log(d.toISOString());
}

Solution 12 - Javascript

Based on Jayarjo's answer:

var loopDate = new Date();
loopDate.setTime(datFrom.valueOf());

while (loopDate.valueOf() < datTo.valueOf() + 86400000) {

    alert(loopDay);
    
    loopDate.setTime(loopDate.valueOf() + 86400000);
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTom GullenView Question on Stackoverflow
Solution 1 - JavascriptDavid JohnstoneView Answer on Stackoverflow
Solution 2 - JavascriptTabaresView Answer on Stackoverflow
Solution 3 - JavascriptvvoView Answer on Stackoverflow
Solution 4 - JavascriptjayarjoView Answer on Stackoverflow
Solution 5 - JavascriptAmr IbrahimView Answer on Stackoverflow
Solution 6 - JavascriptMaxEchoView Answer on Stackoverflow
Solution 7 - JavascriptCarlos Vizcaya SavchencoView Answer on Stackoverflow
Solution 8 - JavascriptGuilherme Simão CoutoView Answer on Stackoverflow
Solution 9 - JavascriptUtkarsh JoshiView Answer on Stackoverflow
Solution 10 - JavascriptnaveenView Answer on Stackoverflow
Solution 11 - JavascriptAlex NolascoView Answer on Stackoverflow
Solution 12 - JavascriptTom GullenView Answer on Stackoverflow