[英]Multiple Dynamic Jquery Datepicker with separate min max date dependency
This Block Of Code is Under Loop ForEach
html += '<tr>';
html +='<input type="hidden" name="amdomainpurchasetype[]" value="'+v.domainpurchasetypeid+'" />';
html +='<td style="text-align:center;">';
html +='<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group input-group">';
html +='<span class="input-group-addon"><b>From</b></span>';
html +='<input data-othervalue="' +v.domainto+ '" id="pendingactmanagerdomainformfromdate' +v.id+ '" tabindex="3" required class="form-control input-lg pendingactmanagerdomainformfromdate" name="actmanagerdomainformfromdate[]" value="'+v.domainfrom+'" type="text" readonly />';
html +='</div>';
html +='</td>';
html +='<td style="text-align:center;">';
html +='<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group input-group">';
html +='<span class="input-group-addon"><b>To</b></span>';
html +='<input data-othervalue="' +v.domainfrom+ '" id="pendingactmanagerdomainformtodate' +v.id+ '" tabindex="3" required class="form-control input-lg pendingactmanagerdomainformtodate" name="actmanagerdomainformtodate[]" value="'+v.domainto+'" type="text" readonly />';
html +='</div>';
html +='</td>';
html += '</tr>';
每次迭代后 html 使用.html(html)渲染到 div
.html(html)之后
循環繼續以下代碼以制作datepicker()
// From date datepicker
$("#pendingactmanagerdomainformfromdate"+v.id).datepicker(
{
changeMonth:true,
dateFormat:"yy-mm-dd",
minDate: new Date(),
maxDate: $("#pendingactmanagerdomainformtodate"+v.id).val(),
onSelect: function(selected) {
$("#pendingactmanagerdomainformtodate"+v.id).datepicker("option", "minDate", selected);
}
});
// To date datepicker
$("#pendingactmanagerdomainformtodate"+v.id).datepicker(
{
changeMonth:true,
dateFormat:"yy-mm-dd",
minDate: $("#pendingactmanagerdomainformfromdate"+v.id).val(),
onSelect: function(selected) {
$("#pendingactmanagerdomainformfromdate"+v.id).datepicker("option", "maxDate", selected);
}
});
循環完成后,它顯示所有字段
但只將最后一個輸入作為日期選擇器:(不是我需要的每個字段
控制台顯示沒有錯誤
所有即將到來的值都存在、有效並已檢查
動態 id 也可以在 html 源中看到,但例如如果 4 個 datepicker(2 個來自 datepicker,2 個到 datepicker)它只顯示最后一個
誰能建議這里可能出現的問題?
在 jsfiddle http://jsfiddle.net/6akt0pe3/3/上創建的示例情況
在您當前使用的 jquery 代碼中, .html()
這將刪除所有以前的 html 並將新的 html 添加到您的dom
。 所以, html
變量里面有tr
但是在每次迭代中你刪除以前的 html 並添加新的,因為這個datepicker
沒有找到它需要初始化的輸入,因為在每次迭代v.id
值也會改變。所以,改為刪除所有.html()
代碼並使用.append()
。
演示代碼:
$(function() { data = [{ id: 1, datefrom: "22-06-2021", dateto: "22-07-2021" }, { id: 2, datefrom: "15-07-2021", dateto: "15-08-2020" }, { id: 3, datefrom: "12-06-2021", dateto: "12-07-2021" }, { id: 4, datefrom: "17-06-2021", dateto: "17-07-2021" } ]; $("#div").html("") $(data).each(function(i, v) { //use append..here $("#div").append(`<tr><td><input data-othervalue="${v.id}" id="pendingactmanagerdomainformfromdate${v.id}" tabindex="3" required class="form-control input-lg pendingactmanagerdomainformfromdate" name="actmanagerdomainformfromdate[]" value="${v.datefrom}" type="text" readonly /></td><td><input data-othervalue="${v.id}" id="pendingactmanagerdomainformtodate${v.id}" tabindex="3" required class="form-control input-lg pendingactmanagerdomainformfromdate" name="actmanagerdomainformfromdate[]" value="${v.dateto}" type="text" readonly /></td></tr>`) //then access inputs.. $('#pendingactmanagerdomainformfromdate' + v.id).datepicker({ dateFormat: 'dd-mm-yy', minDate: new Date(), maxDate: $("#pendingactmanagerdomainformtodate" + v.id).val(), onSelect: function(selected) { $("#pendingactmanagerdomainformtodate" + v.id).datepicker("option", "minDate", selected); } }); $('#pendingactmanagerdomainformtodate' + v.id).datepicker({ dateFormat: 'dd-mm-yy', minDate: $("#pendingactmanagerdomainformfromdate" + v.id).val(), onSelect: function(selected) { $("#pendingactmanagerdomainformfromdate" + v.id).datepicker("option", "maxDate", selected); } }); }); });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="div"> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.