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 ?

phuzi · Accepted Answer · 2018-04-18 13:56:39Z

5

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.

answered Apr 18, 2018 at 13:56

phuzi

13.3k4 gold badges30 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guillaume Georges · Accepted Answer · 2018-04-18 13:36:08Z

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);
    }

aniket mule · Accepted Answer · 2018-04-18 13:30:17Z

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, 2018 at 13:30

aniket mule

9110 bronze badges

1 Comment

aniket mule Over a year ago

@RogerC already did it. Dont know why this is being downvoted.

Tsivery · Accepted Answer · 2020-05-31 08:55:20Z

 $('#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

sɐunıɔןɐqɐp · Accepted Answer · 2020-05-31 09:23:06Z

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>

Collectives™ on Stack Overflow

JavaScript - Loop between two dates. Start and end date

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related