多个动态 Jquery 具有单独的最小最大日期依赖项的日期选择器
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 使用 渲染到 div。html(html)
之后。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>
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 使用 渲染到 div。html(html)
之后。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>