Is there a method in JavaScript to get End date based on Start date and Number of days?

Question

$( document ).ready(function(){
  $('#n_days').change(function(){
    var nstart_date = $("#start_date").val();
    alert (nstart_date);

    var ndays = document.getElementById('n_days').value;
    alert (ndays);
    
    var end_date1 = new Date(nstart_date); // pass start date here
    alert (end_date1);
    
    enddate.setDate(end_date.getDate() + n_days);
    
    var end= $('#end_date').val( (end_date.getMonth() + 1)+ '/' + end_date.getDate() + '/' + end_date.getFullYear() );
    $("#end_date").val(dat);
  });
});

   

<!-- begin snippet: js hide: false console: true babel: false -->

How to get 'end date' filled out based on start date and number of days. I want the user to enter 'start date' and when they enter 'number of days' then automatically end date should be filled out. For example: If user enters start date- 03/10/2020 and number of days-5 then end date should be 08/10/2020.

@Andreas, Hope I have simplified the code. If not please advise some tips to correct it. I am a new user. Thanks. — akt, Oct 03 '20 at 12:55
Does this answer your question? [Add days to JavaScript Date](https://stackoverflow.com/questions/563406/add-days-to-javascript-date) — gurisko, Oct 03 '20 at 19:27

score 0 · Answer 1 · answered Oct 03 '20 at 15:15

I added a prototype function to date object so that we can call add days to start date and second thing i did is that date control expects value in YYYY-MM-dd format which you get by calling toISOString() on date object. below code snipped should solve your problem.

reference post used for adding prototype function to date object. you may spend some time on this post to learn more. Add days to JavaScript Date

Date.prototype.addDays = function(days) {
  debugger;
  var date = new Date(this);
  date.setDate(date.getDate() + Number(days));
  return date;
}

$(document).ready(function() {
  $('#n_days').change(function() {
    var nstart_date = $("#start_date").val();
    alert(nstart_date);

    var ndays = document.getElementById('n_days').value;
    alert(ndays);

    var end_date1 = new Date(nstart_date).addDays(ndays);
    alert(end_date1)
    var endDateFormatted = end_date1.toISOString().substr(0, 10)
    document.getElementById('end_date').value = endDateFormatted;

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <form id="form1" name="form1" action="add_con.php" method="post">
    <table id="t01">
      <tr>
        <td>
          <div class="row">
            <div class="col-40">
              <label for="startdate">start date:</label>
            </div>
            <div class="col-60">
              <input type="date" id="start_date" name="start_date" size="20">
            </div>
          </div>
        </td>
      </tr>
      <td>
        <div class="row">
          <div class="col-40">
            <label for="n_daysa">No. of days:</label>
          </div>
          <div class="col-60">
            <font face="Cambria" style="font-size: 12pt">
              <font size="4">
                <input type="number" id="n_days" name="n_days" min=0 placeholder="Enter no. of days.." required size="20" style="font-size:14px"></font>
            </font>
          </div>
        </div>
      </td>
      <td>
        <div class="row">
          <div class="col-40">
            <label for="end_datea">&nbsp;end date:</label>
          </div>
          <div class="col-60">
            <font face="Cambria" style="font-size: 12pt">
              <input type="date" id="end_date" name="end_date" placeholder="End date.." required size="20" style="font-size:14px">
            </font>
          </div>
        </div>
      </td>
      </tr>
    </table>
    </p>
    <div class="row">
      <p align="center">
        <font face="Cambria">
          <input type="submit" value="Submit">
        </font>
        <font face="Cambria">
          &nbsp;&nbsp;&nbsp;
          <input type="reset" value="Reset" name="reset">
        </font>
    </div>
  </form>
</div>

One more thing to ask, how can we enable other date fields based on the Input from 'Number of days'. I have another 9 date fields (date2--date10) and I want to auto-fill the date as per the entry in 'Number of days'. For example: If user inputs start date- 03/10/2020 and number of days- 5 and end-date - 08/10/2020 then it should display like: date2- 04/10/2020, date3- 05/10/2020, date4- 06/10/2020, date5- 07/10/2020, date6- 08/10/2020, date7- disabled, date8- disabled, date9- disabled, date10- disabled added the new date fields in the code. Thanks. — akt, Oct 03 '20 at 16:09
rather than updating the OP can you accept this as answer and ask another question including the `html`+`js` of what you want to achieve and people will be happy to help. your original question has been already answered so its better that we should move to next question in a new thread and close this by accepting and upvoting if this helped. — sandeep joshi, Oct 03 '20 at 16:44
I have opened another thread to ask this question. Sandeep please see if you can help. Thanks in advance. — akt, Oct 07 '20 at 06:00
please accept/upvote my answer first so that this question can considered complete. — sandeep joshi, Oct 08 '20 at 03:31

score 0 · Answer 2 · edited Oct 04 '20 at 07:25

Please see the answer for your question below. You can also pass negative values to the function addDays() to get previous dates.

Date.prototype.addDays = function (num) {
    var value = this.valueOf();
    value += 86400000 * num;
    return new Date(value);
}
$('#n_days').change(function(){
    var $datepicker = $('#start_date');
    var $datepicker1 = $('#end_date');
    
    var selectedDate = $datepicker.val();
    var result = new Date(selectedDate);
    var dateval = result.getDate();
    
    var ndays = $('#n_days').val();
    numdays =  Number(ndays);
    
    var expirationDate = result.addDays(numdays);
    
     end_date1 = new Date(expirationDate);
     var day = ("0" + end_date1.getDate()).slice(-2);
     var month = ("0" + (end_date1.getMonth() + 1)).slice(-2);
     var year = end_date1.getFullYear();
     var newdate = year + '-' + month + '-' + day;
     $datepicker1.val(newdate);

});


<!-- begin snippet: js hide: false console: true babel: false -->

 <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > 
    </script> 

<div class="container">
 
 <form id="form1" name="form1" action="add_con.php" method="post">
      
 <table id="t01">
  <tr>
    <td>
     <div class="row">
      <div class="col-40">
        <label for="startdate">start date:</label>
      </div>
      <div class="col-60">
     
        <input type="date" id="start_date" name="start_date" size="20" >
      </div>
    </div>
    </td>
  
  </tr>
 
 
  <td> <div class="row">
      <div class="col-40">
        <label for="n_daysa">No. of days:</label>
      </div>
      <div class="col-60">
          <font face="Cambria" style="font-size: 12pt">
          <font size="4">
         <input type="number" id="n_days" name="n_days" min=0 placeholder="Enter no. of days.." required size="20" style="font-size:14px"></font>
       </font>
      </div>
    </div>
    </td>
    <td>
     <div class="row">
      <div class="col-40">
        <label for="end_datea">&nbsp;end date:</label>
      </div>
      <div class="col-60">
           <font face="Cambria" style="font-size: 12pt">
          <input type="date" id="end_date" name="end_date" placeholder="End date.." required size="20" style="font-size:14px">
          </font>

      </div>
    </div>
    </td>
    </tr>

</table>
 <br><br><br>
 <hr color="#003399">

  
<!-- start second table-->

<table class="table1" style="width:1209;" height="151">
  <tr>
    <th height="21" width="34"><font color="#003399">Day</font></th>
    <th height="21" width="295"><font color="#003399">Date</font></th>
  </tr>
  <tr>
    <td height="1" width="34"><b>2</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date2" name="date2" size="10" style="width: 90%; "></font></td>
    </tr>
  
<tr>
<td height="1" width="34"><b>3</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date3" name="date3" size="10" style="width: 90%;"></font></td>
</tr>
<tr>
<td height="1" width="34"><b>4</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date4" name="date4" size="10" style="width: 90%;"></font></td>
</tr>
<tr>
<td height="1" width="34"><b>5</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date5" name="date5" size="10" style="width: 90%;"></font></td>
</tr>
<tr>
<td height="1" width="34"><b>6</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date6" name="date6" size="10" style="width: 90%;"></font></td>
</tr>
<tr>
<td height="1" width="34"><b>7</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date7" name="date7" size="10" style="width: 90%;"></font></td>
</tr>
<tr>
<td height="1" width="34"><b>8</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date8" name="date8" size="10" style="width: 90%;"></font></td>
</tr>
<tr>
<td height="1" width="34"><b>9</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date9" name="date9" size="10" style="width: 90%;"></font></td>
</tr>
<tr>
<td height="1" width="34"><b>10</b></td>
<td width="200" height="1">
    <font face="Cambria" style="font-size: 11pt">
    <input type="date" id="date10" name="date10" size="10" style="width: 90%;"></font></td>
</tr>
</table>


<!-- end second table -->

    <div class="row">
      <p align="center">
      <font face="Cambria">
      <input type="submit" value="Submit"></font>

      <font face="Cambria">
      &nbsp;&nbsp;&nbsp;
      <input type="reset" value="Reset" name="reset"> </font>

    </div>
  </form>
</div>

This is working fine.

One more thing to ask, how can we enable other date fields based on the Input from 'Number of days'. I have another 9 date fields (date2--date10) and I want to auto-fill the date as per the entry in 'Number of days'. For example: If user inputs start date- 03/10/2020 and number of days- 5 and end-date - 08/10/2020 then it should display like:

date2- 04/10/2020, date3- 05/10/2020, date4- 06/10/2020, date5- 07/10/2020, date6- 08/10/2020, date7- disabled, date8- disabled, date9- disabled, date10- disabled

added the new date fields in your code. Please suggest..Thanks.

Please open a new thread for this question so that it can be helpful to someone else also. — , Oct 04 '20 at 07:32

Is there a method in JavaScript to get End date based on Start date and Number of days?

2 Answers2