jQuery根据最接近的输入值在许多输入上设置不同的日期

Question

我有许多日期类型输入(一个用于初始日期，一个用于每个阶段的新日期(和一个数字类型输入，该输入应根据最接近输入的"旧日期"值定义向所有"新日期"输入添加多少天。现在，它根据第一个"旧日期"输入值更改所有日期。

function calcNewDate() {
var addDays = parseInt($('#chdn').val());
$('.newDate').val(formatDate(new Date($('.oldDate').val()).setDate(new Date($('.oldDate').val()).getDate() + addDays)));
}
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Days to add to each newDate: <input id="chdn" type="number" onchange="calcNewDate();" onkeyup="calcNewDate();" />
<div class="stage">
<h4>Stage #1</h4>
Old date - <input class="oldDate" type="date" value="2017-06-01" disabled> New date - <input class="newDate" type="date" disabled>
</div>
<div class="stage">
<h4>Stage #2</h4>
Old date - <input class="oldDate" type="date" value="2017-08-15" disabled> New date - <input class="newDate" type="date" disabled>
</div>
<!-- here could be more stages -->

溶液：

$('.newDate').each(function(){
$(this).val(formatDate(new Date($(this).prevAll('.oldDate').val()).setDate(new Date($(this).prevAll('.oldDate').val()).getDate() + parseInt($('#chdn').val()))));
});

感谢@Zenoo

Answer 1

由于您有多个.newDate，您需要遍历它们并使用 jQuery.each()和.prevAll()方法访问每个.oldDate：

$('.newDate').each(function(){
$(this).val(formatDate(new Date().setDate(new Date($(this).prevAll('.oldDate').val()).getDate() + addDays)));
});

演示：

function calcNewDate() {
const addDays = +$('#chdn').val();
$('.newDate').each(function(){
$(this).val(formatDate(new Date().setDate(new Date($(this).prevAll('.oldDate').val()).getDate() + addDays)));
});
}
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Days to add to each newDate: <input id="chdn" type="number" onchange="calcNewDate();" onkeyup="calcNewDate();" />
<div class="stage">
<h4>Stage #1</h4>
Old date - <input class="oldDate" type="date" value="2017-06-01" disabled> New date - <input class="newDate" type="date" disabled>
</div>
<div class="stage">
<h4>Stage #2</h4>
Old date - <input class="oldDate" type="date" value="2017-08-15" disabled> New date - <input class="newDate" type="date" disabled>
</div>
<!-- here could be more stages -->