Answers:
您可以使用datepicker的onSelect
event。
$(".date").datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
现场示例:
不幸的onSelect
是,即使选择了某个日期,也不会触发它。这是datepicker中的一个设计缺陷:它始终会触发onSelect
(即使未进行任何更改),并且不会在更改的基础输入上触发任何事件。(如果您查看该示例的代码,我们正在侦听更改,但未提出更改。)当事情发生更改时,它可能应该在输入上触发一个事件(可能是通常的change
事件,或者可能是日期选择器-具体的一个)。
当然,如果您愿意,可以将change
事件设置为input
紧急状态:
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});
对于通过jQuery连接的任何处理程序,这都会change
在底层触发input
。但是,它总是会触发它。如果您只想触发实际更改,则必须保存先前的值(可能通过data
)并进行比较。
现场示例:
change
处理程序”,所以我用这个更新了答案。:-)
TJ Crowder的答案(https://stackoverflow.com/a/6471992/481154)很好,仍然很准确。在onSelect函数中触发change事件的过程就已经接近了。
但是,datepicker对象(lastVal
)上有一个不错的属性,它使您可以仅在实际更改时有条件地触发更改事件,而不必自己存储值:
$('#dateInput').datepicker({
onSelect: function(d,i){
if(d !== i.lastVal){
$(this).change();
}
}
});
然后像往常一样处理变更事件:
$('#dateInput').change(function(){
//Change code!
});
lastVal
是;-)
lastVal
至少在我的测试中,datepicker对象上不存在。因此,此解决方案将始终触发更改。
我写这篇文章是因为我需要一种仅在日期更改时才触发事件的解决方案。
这是一个简单的解决方案。每次关闭对话框时,我们都会测试以查看数据是否已更改。如果有,我们将触发一个自定义事件并重置存储的值。
$('.datetime').datepicker({
onClose: function(dateText,datePickerInstance) {
var oldValue = $(this).data('oldValue') || "";
if (dateText !== oldValue) {
$(this).data('oldValue',dateText);
$(this).trigger('dateupdated');
}
}
});
现在我们可以为该自定义事件连接处理程序了...
$('body').on('dateupdated','.datetime', function(e) {
// do something
});
$('#inputfield').change(function() {
dosomething();
});
我正在使用bootstrap-datepicker,以上解决方案均不适合我。这个答案帮助我..
手动编辑日期或清除日期时,bootstrap datepicker更改日期事件未触发
这是我申请的:
$('.date-picker').datepicker({
endDate: new Date(),
autoclose: true,
}).on('changeDate', function(ev){
//my work here
});
希望这可以帮助别人。
在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 );
}
}
});
为我工作:)
我知道这是一个老问题。但是我无法让jquery $(this).change()事件正确触发onSelect。因此,我采用了以下方法通过香草js触发更改事件。
$('.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);
}
}
});
尝试:
$('#idPicker').on('changeDate', function() {
var date = $('#idPicker').datepicker('getFormattedDate');
});
我的测:
var $dateInput = $('#dateInput');
$dateInput.datepicker({
onSelect: function(f,d,i){
if(d !== i.lastVal){
$dateInput.trigger("change");
}
}
}).data('datepicker');
$dateInput.on("change", function () {
//your code
});
如果您正在使用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事件对我有用
希望这个帮助
我认为您的问题可能在于如何设置日期选择器。为什么不断开输入...请不要使用altField。而是在onSelect触发时显式设置值。这将使您可以控制每个交互。用户文本字段和日期选择器。
注意:有时您必须在.change()而不是.onSelect()上调用例程,因为onSelect可以在不需要的不同交互上调用。
伪代码:
$('#date').datepicker({
//altField: , //do not use
onSelect: function(date){
$('#date').val(date); //Set my textbox value
//Do your search routine
},
}).change(function(){
//Or do it here...
});
$('#date').change(function(){
var thisDate = $(this).val();
if(isValidDate(thisDate)){
$('#date').datepicker('setDate', thisDate); //Set my datepicker value
//Do your search routine
});
});