根据输入字段值使用jQuery更改日期

Question

我想在日期字段上添加天数并输出日期结果。问题是，目前的结果只是将天数添加到日期中，就像字符串一样，但实际上没有将天数添加到日期中。有什么想法吗？非常感谢！

$("#add").on('click', function() {
  var set = $('#date').val();
  if (set) {
    $("#result").val($("#day").val() + set);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="one">
  <th>Date</th>
  <th>Days</th>
  <th>Result</th>
  <tbody>
    <td>
      <input type="date" value="2" id="date"><button id="add" type="button">OK</button></td>
    <td><input type="text" value="3" id="day"> </td>
    <td><input type="text" id="result"> </td>
  </tbody>
</table>

- epiphany

Answer 1

$('#date').val()会给你一个yyyy-mm-dd格式的日期字符串，用-拆分它。

然后在最后一个拆分值上加上天数。

注意：当添加天数后的值超过30/31时，你必须注意月份中的天数不能超过这个限制。假设您可以自己添加这个条件。

$("#add").on('click', function() {
  var set = $('#date').val().split("-");
  if (set) {
    $("#result").val([set[0], set[1], Number($("#day").val()) + Number(set[2])].join("-"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="one">
  <th>Date</th>
  <th>Days</th>
  <th>Result</th>
  <tbody>
    <td>
      <input type="date" value="2" id="date"><button id="add" type="button">OK</button></td>
    <td><input type="text" value="3" id="day"> </td>
    <td><input type="text" id="result"> </td>
  </tbody>
</table>

- vatz88

---

问题是日期字段很可能超过30天，有什么解决办法吗？ - epiphany

我会建议你采用@Prashant Shirke的答案，这是解决这个问题更正确的方式。 - vatz88

虽然如果你想用我的代码来实现，你需要添加条件语句，比如 if..else。检查天数是否超过，如果需要的话相应地增加月份的值。 - vatz88

Answer 2

您需要从字符串生成Date对象，然后在日期对象上执行其余操作。

$("#add").on('click', function() {
  var val = $('#date').val();
  if (val) {
    // parse the date string
    var set = new Date(val);

    // update the date value, for adding days
    set.setDate(set.getDate() + Number($("#day").val()));

    // generate the result format and set value
    $("#result").val([addPrefix(set.getDate()), addPrefix(set.getMonth() + 1), set.getFullYear()].join('/'));
  }
});

// function for adding 0 prefix when date or month
// is a single digit
function addPrefix(str) {
  return ('0' + str).slice(-2)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="one">
  <th>Date</th>
  <th>Days</th>
  <th>Result</th>
  <tbody>
    <td>
      <input type="date" value="2" id="date"><button id="add" type="button">OK</button></td>
    <td><input type="text" value="3" id="day"> </td>
    <td><input type="text" id="result"> </td>
  </tbody>
</table>

- Pranav C Balan

---

当增加1天时，结果仍然是与日期字段相同的那一天，加法和结果日期似乎不在正确的格式中。 - epiphany

Answer 3

请查看以下代码。

首先，您需要将输入的日期字符串转换为日期对象，然后需要添加天数（需要首先将天数值转换为数字格式）。

然后，按照所需格式显示新日期即可。如果不需要，可以删除添加一个函数以左填充零。

$("#add").on('click', function() {
  var days = $('#day').val();
  if (days) {
  var date = new Date($('#date').val());
var newdate = new Date(date.setDate(date.getDate() + parseInt(days) ));
  
    $("#result").val( padleft(newdate.getMonth()+1)  + '/' + padleft(newdate.getDate()) + '/' +  newdate.getFullYear());
  }
});

function padleft(val){
return ("0"+val).slice(-2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="one">
  <th>Date</th>
  <th>Days</th>
  <th>Result</th>
  <tbody>
    <td>
      <input type="date" value="2" id="date"><button id="add" type="button">OK</button></td>
    <td><input type="text" value="3" id="day"> </td>
    <td><input type="text" id="result"> </td>
  </tbody>
</table>

- Prashant Shirke