javascript - 将一个日期选择器中的 6 个月添加到另一个日期选择器

标签 javascript html

我有两个日期选择器和一个 HTML 组合框。该组合框包含 2 个值(6 个月和 1 年)。如果我从组合框中选择 6 个月,第二个日期选择器应显示第一个日期选择器日期 6 个月后的日期。

我需要仅使用 JavaScript 来实现此目的的代码,而不是使用 jQuery。

我的代码是

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

最佳答案

我从一开始就获取日期并添加月数 - 然后使用 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">

关于javascript - 将一个日期选择器中的 6 个月添加到另一个日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56753827/

相关文章:

javascript - 如何显示 Internet Explorer 中的所有插件?

javascript - 如何在不了解文件内容的情况下用 javascript 解析 JSON 文件?

javascript - 填写下拉菜单和单选按钮选项以继续访问正确的网址

javascript - 无法从 JavaScript 循环打开 PHP 文件

javascript - 使用 onclick 更改文本然后再改回来

javascript - XML 请求中的文件提前结束错误

javascript - 转换 CSS 样式对 <a> 标签没有影响

html - 具有折叠 Angular 效果和动画的 CSS 按钮

javascript - 将 DOM 操作应用于 HTML 并保存结果?

css - 防止在浏览器的放大/缩小中破坏布局 - 不是通常的 div 东西