JavaScript - Loop between two dates. Start and end date

Question

I'm trying to console.log all the dates between two dates.

Here is the code i have so far:

    var dString = "18.04.2018";
    var dParts = dString.split('.');
    var in30Days = new Date(dParts[2] + '/' +
                            dParts[1] + '/' +
                            (+dParts[0] + 10)
                   );
    var endDate =  in30Days.getDate() + "." + (in30Days.getMonth()+1) + "." +in30Days.getFullYear();     
    console.log("Now:" + dString + " EndDate: " + endDate);

    for (var d = dString; d <= endDate; d.setDate(d.getDate() + 1)) {
        var loopDay = new Date(d);
        console.log("Day:" + loopDay);
    }

The end date is the start date plus 10 days.

Here is the console log output i receive:

Now:18.04.2018 EndDate: 28.4.2018
Day:Invalid Date

Why the date is invalid. Where is my mistake ?

score 5 · Accepted Answer · answered Apr 18 '18 at 13:56

I'd first convert the string you have to a date and then just add days until you get to however many days in the future you need.

const dString = "18.04.2018";
const days = 30;

let [day, month, year] = dString.split('.');

// month - 1 as month in the Date constructor is zero indexed
const now = new Date(year, month - 1, day);

let loopDay = now;
for (let i = 0; i <= days; i++) {
  loopDay.setDate(loopDay.getDate() + 1);
  console.log("Day: " + loopDay);
}

31 consecutive dates logged to the console.

score 2 · Answer 2 · answered Apr 18 '18 at 13:36

You are using dString in your loop. It's not a date, it's a string.

Also, I would avoid using the Date(string) constructor. I would use Date(year, month, date) instead. Careful though, january is the month 0 so you'll have to retract 1 to the month obtained by splitting the string.

See the snippet below for a working example.

var startString = "18.4.2018";
    var startParts = startString.split('.');
    var startDate = new Date(startParts[2], startParts[1]-1, startParts[0]);
    var in30DaysDate = new Date(startParts[2], startParts[1]-1, startParts[0]);; 

    in30DaysDate.setDate(startDate.getDate() + 30)

    console.log("Start:" + startDate + " EndDate: " + in30DaysDate);

    for (var d = startDate; d <= in30DaysDate; d.setDate(d.getDate() + 1)) {
        var loopDay = new Date(d);
        console.log("Day:" + loopDay);
    }

score 0 · Answer 3 · answered Apr 18 '18 at 13:30

0

In for loop, you are using variable dString which is in a string format. Firstly, you will need to convert a date string to date format. You can refer an answer here.

Converting string to date in js

answered Apr 18 '18 at 13:30

aniket mule

91
10

@RogerC already did it. Dont know why this is being downvoted. – aniket mule Apr 18 '18 at 13:40

score 0 · Answer 4 · answered May 31 '20 at 08:55

 $('#button').on('click',function(){
    var end = $('#end').val()
    var start = $('#start').val()
    var tableau = testdiff(new Date(start),new Date(end));
    console.log(tableau);
  })

  function testdiff(from,to){
    var resultat=[];
    while (from <= to) {
        var dd = from.getDate();
        var mm = from.getMonth()+1; 
        var yyyy = from.getFullYear();
        if(dd<10) {dd='0'+dd;} 
        if(mm<10){mm='0'+mm;} 
        var vDate = yyyy+'-'+mm+'-'+dd; 
        resultat.push(vDate);
        from = new Date(from.setDate(from.getDate() + 1));
    }
    return resultat;
}

<div class="my-2 mx-2">
        <div class="col-sm-4">
            <label for="">start</label>
            <input type="date" name="start" id="start" class="form-control form-control-sm">
        </div>
        <div class="col-sm-4">
            <label for=""> end</label>
            <input type="date" name="end" id="end" class="form-control form-control-sm">
        </div>
        <div class="col-sm-4 my-3">
            <button type="button" id="button" class="btn btn-default">clic</button>
        </div>
        
    </div>

use jquery

score 0 · Answer 5 · edited May 31 '20 at 09:23

Here is a code which displays the result between two different dates in an array:

 $('#button').on('click',function(){
    var end = $('#end').val()
    var start = $('#start').val()
    var tableau = testdiff(new Date(start),new Date(end));
    console.log(tableau);
  })

  function testdiff(from,to){
    var resultat=[];
    while (from <= to) {
        var dd = from.getDate();
        var mm = from.getMonth()+1; 
        var yyyy = from.getFullYear();
        if(dd<10) {dd='0'+dd;} 
        if(mm<10){mm='0'+mm;} 
        var vDate = yyyy+'-'+mm+'-'+dd; 
        resultat.push(vDate);
        from = new Date(from.setDate(from.getDate() + 1));
    }
    return resultat;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="my-2 mx-2">
        <div class="col-sm-4">
            <label for="">Start date</label>
            <input type="date" name="start" id="start" class="form-control form-control-sm">
        </div>
        <div class="col-sm-4">
            <label for=""> End date</label>
            <input type="date" name="end" id="end" class="form-control form-control-sm">
        </div>
        <div class="col-sm-4 my-3">
            <button type="button" id="button" class="btn btn-primary form-control">clic</button>
        </div>
        
    </div>
    <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>

JavaScript - Loop between two dates. Start and end date

5 Answers5