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