Question

我有两个Datepicker和一个HTML组合框。组合框包含2个值（6个月和1年）。如果我从组合框中选择6个月，则第二个日期选择器应显示从第一个日期选择器日期起6个月之后的日期。

我只需要在jQuery中使用JavaScript来实现此目的代码。

我的代码是

<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>

Answer 1

我从头开始获取日期并添加月份数-然后使用valueAsDate设置第二个日期选择器

然后我将此功能添加到开始日期和月份选择器

香草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">

Answer 2

您可以获取开始日期的值并将其转换为日期，然后添加所需的月数，最后将新日期设置为结束日期

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

从一个日期选择器添加6个月到另一个日期选择器

2 个答案: