更改时引导日期选择器
Posted
技术标签:
【中文标题】更改时引导日期选择器【英文标题】:bootstrap datepicker on change 【发布时间】:2019-08-23 16:17:09 【问题描述】:我有一个引导日期选择器,我想在日期更改时提醒它,但它的工作方式不同
我正在尝试使用简单的 jquery on.(change)
事件,因此它在用户单击日期选择器图标时执行两次,在用户选择日期时执行另一次
代码
$('#deliveryDate').datepicker(
format: 'dd/mm/yyyy',
);
$("#deliveryDate").on("change", function(e)
alert("hi")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
<label for="deliveryDate" id="commonHeader"> Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" />
</div>
我试过了
$("#deliveryDate").on("dp.change", function(e)
alert('date');
);
但是这个不工作
我想要做的是当用户选择日期时,不应该在点击日期选择器时发出警报
【问题讨论】:
dp.change 适用于 datetimepicker。 ***.com/questions/6471959/… jQuery Datepicker onchange event issue的可能重复 @Refilon 那个是 jquery 日期选择器 @HarshwardhanSharma 我只使用日期选择器,所以没有必要谈论日期时间选择器 Detect change to selected date with bootstrap-datepicker的可能重复 【参考方案1】:你可以比较值,当有变化时,触发警报
$("#deliveryDate").datepicker(
format: 'dd/mm/yyyy',
);
var lastValue = null;
$("#deliveryDate").on("change", function(e)
if(lastValue !== e.target.value)
alert("hi");
console.log(e.target.value);
lastValue = e.target.value;
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
<label for="deliveryDate" id="commonHeader"> Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" />
</div>
【讨论】:
【参考方案2】:您只需将“change”替换为“focusout”: 希望对您有所帮助:
$('#deliveryDate').datepicker(
format: 'dd/mm/yyyy',
);
$("#deliveryDate").on("focusout", function(e)
e.preventDefault();
alert("hi")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
<label for="deliveryDate" id="commonHeader"> Date:</label>
<input type="text" id="deliveryDate" name="deliveryDate" />
</div>
【讨论】:
非常感谢,Nemer,我已经尝试了几乎所有的方法,除了 focusout 没有任何效果以上是关于更改时引导日期选择器的主要内容,如果未能解决你的问题,请参考以下文章