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>

Answer 1

您需要从字符串生成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>

Answer 2

检查以下代码。

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

然后根据格式显示结果中的新日期，您可以设置它。添加了一个用于填充零的功能，如果不需要，可以删除。

＆＃13;

$("#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);
}

＆＃13;

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

＆＃13;

Answer 3

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

参考输入字段值JQuery更改日期

3 个答案: