Question

我在这里有这些输入;

Days:<select id="select">
         <option value="150 days">150 days</option>
         <option value="200 days">200 days</option>
       </select>
Date1:<input type="date" id="date1">
Date2:<input type="date" id="date2">

我不知道如何正确解释这一点，但应该发生的是：

如果用户选择150天，它将被添加到date1（也由用户输入）并将自动显示在date2中。

请注意，date1不是当前日期......

Answer 1

您必须获取date1的值，将其转换为日期，然后将select元素中的日期添加到date2字段中。您可以在JavaScript中创建一个在更改date1字段时触发的函数。

HTML：

Days:<select id="select">
         <option value="150">150 days</option>
         <option value="200">200 days</option>
       </select>
Date1:<input type="date" onchange="setSecondDate();" id="date1">
Date2:<input type="date" id="date2">

JavaScript的：

function setSecondDate() {
    var days = document.getElementById("select").value;
    var date = new Date(document.getElementById("date1").value);
    date.setDate(date.getDate() + parseInt(days));
    document.getElementById("date2").valueAsDate = date;
}

这是一个jsfiddle示例：https://jsfiddle.net/vk1ujuu2/

--- ---编辑

如果您需要它在所有浏览器中工作，您可以使用jQuery UI的datepicker。您只需要包含jQuery和jQuery UI，并编写一个额外的函数来解析日期到字符串。

包括：

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

解析功能：

Date.prototype.yyyymmdd = function() {
  var mm = this.getMonth() + 1;
  var dd = this.getDate();

  return [this.getFullYear(),
          (mm>9 ? '' : '0') + mm,
          (dd>9 ? '' : '0') + dd
         ].join('-');
};

JSFiddle：https://jsfiddle.net/vk1ujuu2/5/

如何在<input type =“date”/>中添加天数

1 个答案: