javascript - 在表中使用多个日期选择器引导 Datepicker 和 changeDate 事件
问题描述
我有一个表,每行都有一个数据选择器,每个日期选择器都有一个动态生成的 ID。我目前有一个在更改日期时触发的脚本,但我发现当用户使用键盘编辑此输入字段时也会触发。
我可以更改为使用changeDate事件,但当我无法为每个日期选择器指定 ID 时,不确定这如何与多个日期选择器一起使用?另一种选择是阻止用户直接使用键盘修改数据,但不确定这是否可能?
这是我的表当前外观的示例:
$(document).ready(function() {
$(".form-control.datepicker").change(function() {
alert("starting Date Updated Changes");
//console.log( 'starting Date Updated update' );
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.en-AU.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<script>
$('.datepicker').datepicker({
todayHighlight: true,
clearBtn: true,
autoclose: true
})
</script>
<table class="table table-condensed table-striped table-bordered">
<tbody>
<tr id="70283">
<td>FT523452</td>
<td>X234</td>
<td>Container Oranges</td>
<td>534830</td>
<td class="">ZDSFASDF42234</td>
<td>Transit</td>
<td id="70283"><input type="text" id="70283" class="form-control datepicker" autocomplete="off" placeholder="Date Updated" data-date-format="dd/mm/yyyy" name="dateUpdated"></td>
</tr>
<tr id="70543">
<td>PB213412</td>
<td>Z98787</td>
<td>Container Apples</td>
<td>535092</td>
<td class="">PSDFKS42134</td>
<td>Transit</td>
<td id="70543"><input type="text" id="70543" class="form-control datepicker" autocomplete="off" placeholder="Date Updated" data-date-format="dd/mm/yyyy" name="dateUpdated"></td>
</tr>
</tbody>
</table>
解决方案
$(document).ready(function() {
$(".datepicker").datepicker();
$(".form-control.datepicker").change(function(e) {
console.log(e);
alert("starting Date Updated Changes");
//console.log( 'starting Date Updated update' );
});
});
推荐阅读
- c# - 使用 DI 模拟依赖类的正确方法
- facebook - 如何在服务器端验证 FBInstant.context.getID() 以确保它不是伪造的?
- neo4j - 大多数按相互关系排序 neo4j
- python - 用另一列替换一列但不缺少值
- rcloud - 如何在 RCloud Notebook 权限/组管理中删除组?
- node.js - 如何让用户使用Node js在paytm支付中输入应付金额
- javascript - 我应该将谷歌应用脚本函数创建为 const
- angular - 400 Bad request CSRF Angular 8 with no razor pages
- python - 是否有注册模块导入/加载挂钩的机制?
- python - 在两个单词之间查找文本并替换它的最有效/pythonic 方式