参考输入字段值 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>

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

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

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>