我有一个JS代码,当你改变一个字段,它调用搜索例程。问题是,当Datepicker更新输入字段时,我找不到任何将触发的jQuery事件。
由于某种原因,当Datepicker更新字段时,没有调用更改事件。当日历弹出时,它会改变焦点,所以我也不能使用它。什么好主意吗?
我有一个JS代码,当你改变一个字段,它调用搜索例程。问题是,当Datepicker更新输入字段时,我找不到任何将触发的jQuery事件。
由于某种原因,当Datepicker更新字段时,没有调用更改事件。当日历弹出时,它会改变焦点,所以我也不能使用它。什么好主意吗?
当前回答
你在datepicker对象中寻找onSelect事件:
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});
其他回答
你可以使用datepicker的onSelect事件。
$(".date").datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
生活例子:
$(".date") .datepicker({ onSelect: function(dateText) { console.log("Selected date: " + dateText + "; input's current value: " + this.value); } }) .on("change", function() { console.log("Got change event from field"); }); <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <input type='text' class='date'> <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
不幸的是,onSelect会在选择日期时触发,即使日期没有改变。这是datepicker的一个设计缺陷:它总是触发onSelect(即使没有任何变化),并且不会在底层输入发生变化时触发任何事件。(如果你看一下这个例子的代码,我们正在监听变化,但是它们并没有被引发。)当事情发生变化时,它可能会在输入上触发一个事件(可能是通常的更改事件,也可能是特定于数据选择器的事件)。
当然,如果你愿意,你也可以在输入端触发change事件:
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});
这将对通过jQuery连接的任何处理程序的底层输入触发更改。但是,它总是会发射。如果您只想在实际更改时触发,则必须保存之前的值(可能通过数据)并进行比较。
生活例子:
$(".date") .datepicker({ onSelect: function(dateText) { console.log("Selected date: " + dateText + "; input's current value: " + this.value); $(this).change(); } }) .on("change", function() { console.log("Got change event from field"); }); <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <input type='text' class='date'> <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
如果你正在使用wdcalendar,这将帮助你
$("#PatientBirthday").datepicker({
picker: "<button class='calpick'></button>",
onReturn:function(d){
var today = new Date();
var birthDate = d;
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
$('#ageshow')[0].innerHTML="Age: "+age;
$("#PatientBirthday").val((d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear());
}
});
事件onReturn为我工作
希望这对你有所帮助
我的解决方案是:
events: {
'apply.daterangepicker #selector': 'function'
}
你在datepicker对象中寻找onSelect事件:
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});
我知道这是一个老问题。但是我不能得到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);
}
}
});