我有一个JS代码,当你改变一个字段,它调用搜索例程。问题是,当Datepicker更新输入字段时,我找不到任何将触发的jQuery事件。
由于某种原因,当Datepicker更新字段时,没有调用更改事件。当日历弹出时,它会改变焦点,所以我也不能使用它。什么好主意吗?
我有一个JS代码,当你改变一个字段,它调用搜索例程。问题是,当Datepicker更新输入字段时,我找不到任何将触发的jQuery事件。
由于某种原因,当Datepicker更新字段时,没有调用更改事件。当日历弹出时,它会改变焦点,所以我也不能使用它。什么好主意吗?
当前回答
我知道这是一个老问题。但是我不能得到jquery $(this).change()事件正确地点燃onSelect。所以我用下面的方法通过vanilla js来触发change事件。
$('.date').datepicker({
showOn: 'focus',
dateFormat: 'mm-dd-yy',
changeMonth: true,
changeYear: true,
onSelect: function() {
var event;
if(typeof window.Event == "function"){
event = new Event('change');
this.dispatchEvent(event);
} else {
event = document.createEvent('HTMLEvents');
event.initEvent('change', false, false);
this.dispatchEvent(event);
}
}
});
其他回答
在jQueryUi 1.9上,我已经设法让它通过一个额外的数据值和beforeShow和onSelect函数的组合来工作:
$( ".datepicker" ).datepicker({
beforeShow: function( el ){
// set the current value before showing the widget
$(this).data('previous', $(el).val() );
},
onSelect: function( newText ){
// compare the new value to the previous one
if( $(this).data('previous') != newText ){
// do whatever has to be done, e.g. log it to console
console.log( 'changed to: ' + newText );
}
}
});
对我有用:)
DatePicker选择的值更改事件代码如下
/* HTML Part */
<p>Date: <input type="text" id="datepicker"></p>
/* jQuery Part */
$("#datepicker").change(function() {
selectedDate= $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
alert(selectedDate);
});
有些人可能正在使用XDSoft DateTimePicker https://xdsoft.net/jqplugins/datetimepicker/
这就是改变事件
onSelectDate: function(){
alert('change date event);
}
https://xdsoft.net/jqplugins/datetimepicker/#onSelectDate
您可以使用datepicker的onClose选项,并将更改代码放在其中。当datepicker模式关闭时触发。我试图触发变化事件,但这不会工作,所以我把我的代码内的onClose代替,它工作。同样的方法也适用于onSelect,如果你需要在选择日期时触发。
$('#el').datepicker({
onClose: function () {
// code here
}
});
日期选择选项https://api.jqueryui.com/datepicker/
手册说:
apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked
So:
$('#daterange').daterangepicker({
locale: { cancelLabel: 'Clear' }
});
$('#daterange').on('apply.daterangepicker', function() {
alert('worked!');
});
对我有用。