How can I set the date from one date input to another date input?

Question

I have two date inputs. When I choose start date, I want jquery to automatically generate an end date that's 3 months later.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div class="container">
  <div class="col-md-6">
    <label class="text-black" for="dpradzia">Start Date</label>
    <input type="date" id="darbo_pradzia" name="darbo_pradzia" class="form-control">
  </div>
  <div class="col-md-6">
    <label class="text-black" for="bandomasis_laikotarpis">End date </label>
    <input type="date" id="bandomasis_laikotarpis" name="bandomasis_laikotarpis" class="form-control">
  </div>
</div>

Majed Badawi · Accepted Answer · 2020-06-01T07:28:20.070

You should listen to change events of the first input and create a new Date with its value. After that, you can add 3 months to this object using new Date(date.setMonth(date.getMonth()+3)). The new date with the extra 3 months should be formatted into yyyy-mm-dd and set to the value of the second input. The complete program is:

$(document).ready(function() {
     $('#darbo_pradzia').change(function(){
          let date = new Date($(this).val());
          let newDate = addMonths(date, 3);
          var formatted = newDate.toISOString().split('T')[0]; //yyyy-mm-dd
          console.log(formatted);
          $('#bandomasis_laikotarpis').val(formatted);
     });
     //add months to date function
     function addMonths(date, months) {
          var d = date.getDate();
          date.setMonth(date.getMonth() + +months);
          if (date.getDate() != d) {
               date.setDate(0);
          }
          return date;
     }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div class="container">
     <div class="col-md-6">
          <label class="text-black" for="dpradzia">Start Date</label>
          <input type="date" id="darbo_pradzia" name="darbo_pradzia" class="form-control">
     </div>
     <div class="col-md-6">
          <label class="text-black" for="bandomasis_laikotarpis">End date </label>
          <input type="date" id="bandomasis_laikotarpis" name="bandomasis_laikotarpis" class="form-control">
     </div>
</div>

EDIT : According to @RobG's comment, adding a number of months to a date object has several unique test cases that need to be taken into consideration. Therefore, I used his answer in this post to achieve this operation.

Adding months is not that simple, see [Adding months to a Date in JavaScript](https://stackoverflow.com/questions/12793045/adding-months-to-a-date-in-javascript/12793246#12793246). E.g. try adding 3 months to 30 November or 31 March. — RobG, May 31 '20 at 23:27

score 0 · Answer 2 · answered May 31 '20 at 13:40

<script>
   $('#darbo_pradzia').on('focusout', function(){
    let startDate = new Date($('#darbo_pradzia').val());
    let endDate = new Date(startDate);
    endDate.setMonth(endDate.getMonth()+3);

   let day = ("0" + endDate.getDate()).slice(-2);
   let month = ("0" + (endDate.getMonth() + 1)).slice(-2);
   let date = endDate.getFullYear()+"-"+(month)+"-"+(day) ;

$('#bandomasis_laikotarpis').val(date);
   })
</script>

You can read the value on the onchange event or focusout event. Read the date and you can copy the inserted date from the Date constructor. Increase the month, no problem if you overflow the 12 months because automatically the year is increased and the month value scaled between [0-11]. Now to write the date in the input date field there are two problem:

Date control in HTML 5 accepts in the format of Year - month - day

If the month is 5, it needs to be set as 05 not 5 simply. The same thing for day field also.

Add the script downwards in the page, or add a ready/onload event

How can I set the date from one date input to another date input?

2 Answers2