Add 6 months from one date picker to another datepicker

Question

I have two datepickers and one combobox in HTML. The combobox contain 2 values (6 months and 1 year). If I select 6 months from the combobox the second datepicker should show the date after 6 months from the first datepickers date.

I need code for this using JavaScript only not in jQuery.

My code is

<html>
  <body>
    <select>
      <option value="6">6 Months</option>
      <option value="12">1 Year</option>
    </select>
    <input type="date" name="Sdate" id="Sdate">
    <input type="date" name="edate" id="edate">
  </body>
</html>

Dear Sudarshan, you'll have to provide a bit more details such as what all you tried, what error you are facing. And then someone in the community will be able to help you out. — Sukhi, Jun 25 '19 at 12:18
refer link: https://stackoverflow.com/questions/5645058/how-to-add-months-to-a-date-in-javascript — Ni3, Jun 25 '19 at 12:26

mplungjan · Accepted Answer · 2019-06-25T12:33:07.813

I get the date from the start and add the number of months - then set the second datepicker using valueAsDate

I then add this function to both start date and month selector

Vanilla JavaScript

function setDate() {
  let d = new Date(document.getElementById("sDate").value)
  let mon = +document.getElementById("mon").value;
  d.setMonth(d.getMonth()+mon)
  document.getElementById("eDate").valueAsDate = d;
}

document.getElementById("sDate").addEventListener("change",setDate)
document.getElementById("mon").addEventListener("change",setDate)

<select id="mon">
  <option value="6">6 Months</option>
  <option value="12">1 Year</option>
</select>
<input type="date" name="Sdate" id="sDate">
<input type="date" name="edate" id="eDate">

score 0 · Answer 2 · answered Jun 25 '19 at 12:24

0

You can get the value of the start date and convert it to date then add the number of months you want to it and finally set the new date to the end date

$(document).ready(function(){
  $("#addToDate").change(function(){
    var valToAdd = $(this).val();
    var date = new Date($("#Sdate").val());
    date.setMonth(date.getMonth() + Number(valToAdd));
    $("#edate").val(date.toISOString().split('T')[0]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<select id="addToDate">
<option value="6">6 Months</option>
<option value="12">1 Year</option>
</select>
<input type="date" name="Sdate" id="Sdate">
<input type="date" name="edate" id="edate">
</body>
</html>

answered Jun 25 '19 at 12:24

Andam

2,087
1
8
21

Question was not tagged jQuery - and _I need code for this using javascript only not in jquery_ – mplungjan Jun 25 '19 at 12:32
@mplungjan that is 100% correct and I did this intentionally. because this is not a code requesting website. I showed him the idea. Its up to him to implement it. – Andam Jun 25 '19 at 12:56
@mplungjan I dont know what you mean by your comment but good for you if you are helping someone. that is why we are here for. we dont get paid for answering questions. we do it to help people. I think people learn the best when they do it themselves. we just need to give them hints and ideas to get them started. – Andam Jun 25 '19 at 13:03
@mplungjan he does not know the answer either way. he has to learn it in both cases and jquery is javascript its not another language so the idea is the same he just has to look how to implement it. Anyway as I said, you have your answer. I have mine. I dont know what do you want from me. Do you want me to delete my answer, if so how is that helpful. If you want me to change my answer you already have the answer in javascript. so what do you want buddy – Andam Jun 25 '19 at 13:10
1

@mplungjan thank you. As I said from fist comment, I agree with you. I hope my intention where clear enough. – Andam Jun 25 '19 at 13:17

Add 6 months from one date picker to another datepicker

2 Answers2