jQuery Datepicker onchange事件问题

Question

我有一个JS代码,当你更改字段时,它会调用一个搜索例程.问题是,当Datepicker更新输入字段时,我找不到任何会触发的jQuery事件.

出于某种原因,当Datepicker更新字段时,不会调用更改事件.当弹出日历时,它会改变焦点,所以我也不能使用它.有任何想法吗？

Answer 1

您可以使用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="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

不幸的是,onSelect只要选择了日期就会触发,即使它没有改变.这是datepicker中的一个设计缺陷:它始终触发onSelect(即使没有任何更改),也不会在更改时触发基础输入上的任何事件.(如果查看该示例的代码,我们正在侦听更改,但它们不会被提升.)当事情发生变化时,它可能应该在输入上触发事件(可能是通常的change事件,或者可能是日期选择器 -特定的).

如果你愿意,当然,你可以把change事件发生在input火上:

$(".date").datepicker({
    onSelect: function() {
        $(this).change();
    }
});

这将触发通过jQuery连接的任何处理程序change的底层input.但同样,它总是触发它.如果您只想触发真正的更改,则必须保存以前的值(可能是通过data)并进行比较.

实例:

$(".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="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Answer 2

TJ Crowder的答案(/sf/answers/453039471/)非常好,仍然保持准确.触发onSelect函数中的change事件就像你将要获得的那样接近.

但是,datepicker对象(lastVal)上有一个很好的属性,它允许您仅在实际更改时有条件地触发change事件,而无需自己存储值:

$('#dateInput').datepicker({
     onSelect: function(d,i){
          if(d !== i.lastVal){
              $(this).change();
          }
     }
});

然后像正常一样处理更改事件:

$('#dateInput').change(function(){
     //Change code!
});

Answer 3

您在datepicker对象中查找onSelect事件:

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});

Answer 4

我写这个是因为我需要一个解决方案,只有在日期改变时触发事件.

这是一个简单的解决方案.每次关闭对话框时,我们都会测试数据是否已更改.如果有,我们触发自定义事件并重置存储的值.

$('.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
});

Answer 5

$('#inputfield').change(function() { 
    dosomething();
});

Answer 6

我正在使用bootstrap-datepicker,以上解决方案都没有为我工作.这个答案对我有帮助..

手动编辑日期或清除日期时,bootstrap datepicker更改日期事件不会启动

这是我申请的内容:

 $('.date-picker').datepicker({
     endDate: new Date(),
     autoclose: true,
 }).on('changeDate', function(ev){
        //my work here
    });

希望这可以帮助别人.

Answer 7

我知道这是一个老问题。但我无法让 jquery $(this).change() 事件正确触发 onSelect。所以我采用以下方法通过 vanilla 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);
         }
     }
});

Answer 8

尝试 ：

$('#idPicker').on('changeDate', function() {
    var date = $('#idPicker').datepicker('getFormattedDate');
});