javascript - 具有单独的最小最大日期依赖性的多个动态 Jquery 日期选择器
问题描述
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>
推荐阅读
- java - 使用 Java 将多个图像转换为灰度
- python-3.x - 高效的二维列表初始化 [python]
- gitlab - 逃脱 ';' 在 Terraform GitLab 环境变量中
- c++ - 检查二叉树的函数是平衡的 C++
- node.js - nodejs收到错误TypeError:无法读取未定义的属性'then'
- python - lxml + django + uwsgi 无法生成正确格式的excel文件?
- html - 使 InputBox 中的部分文本在 Angular 7 中不可编辑
- node.js - Mongoose 错误:发布评论时出现 CastError
- javascript - 防止从 TinyMCE 内部触发拖动事件
- r - 部分匹配字符串以删除 R 中的 df 列