jQuery Datepicker onchange 事件问题

jQuery Datepicker onchange event issue

提问by zbestzeus

I have a JS code in which when you change a field it calls a search routine. The problem is that I can't find any jQuery events that will fire when the Datepicker updates the input field.

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

For some reason, a change event is not called when Datepicker updates the field. When the calendar pops up it changes the focus so I can't use that either. Any ideas?

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

回答by T.J. Crowder

You can use the datepicker's onSelectevent.

您可以使用日期选择器的onSelectevent。

$(".date").datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
});

Live example:

现场示例：

$(".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>

Unfortunately, onSelectfires whenever a date is selected, even if it hasn't changed. This is a design flaw in the datepicker: It always fires onSelect(even if nothing changed), and doesn'tfire any event on the underlying input on change. (If you look in the code of that example, we're listening for changes, but they aren't being raised.) It should probably fire an event on the input when things change (possibly the usual changeevent, or possibly a datepicker-specific one).

不幸的是，onSelect只要选择了日期就会触发，即使它没有改变。这是日期选择器中的一个设计缺陷：它总是触发onSelect（即使没有任何更改），并且不会在更改的基础输入上触发任何事件。（如果您查看该示例的代码，我们正在侦听更改，但并未引发更改。）当事情发生变化时，它可能应该在输入上触发一个事件（可能是通常的change事件，也可能是日期选择器-具体一个）。

---

---

If you like, of course, you can make the changeevent on the inputfire:

如果你愿意，当然，你可以change在input火上制作事件：

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

That will fire changeon the underlying inputfor any handler hooked up via jQuery. But again, it alwaysfires it. If you want to only fire on a real change, you'll have to save the previous value (possibly via data) and compare.

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

Live example:

现场示例：

$(".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>

回答by theChrisKent

T.J. Crowder's answer (https://stackoverflow.com/a/6471992/481154) is very good and still remains accurate. Triggering the change event within the onSelect function is as close as you're going to get.

TJ Crowder 的回答 ( https://stackoverflow.com/a/6471992/481154) 非常好，而且仍然准确。在 onSelect 函数中触发更改事件与您将要获得的一样接近。

However, there is a nice property on the datepicker object (lastVal) that will allow you to conditionally trigger the change event only on actual changeswithout having to store the value(s) yourself:

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

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

Then just handle change events like normal:

然后像平常一样处理更改事件：

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

回答by locrizak

Your looking for the onSelectevent in the datepicker object:

您在 datepicker 对象中寻找onSelect事件：

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

回答by CodeDreamer68

I wrote this because I needed a solution to trigger an event only if the date changed.

我写这个是因为我需要一个解决方案来仅在日期更改时触发事件。

It is a simple solution. Each time the dialog box closes we test to see if the data has changed. If it has, we trigger a custom event and reset the stored value.

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

$('.datetime').datepicker({
    onClose: function(dateText,datePickerInstance) {
        var oldValue = $(this).data('oldValue') || "";
        if (dateText !== oldValue) {
            $(this).data('oldValue',dateText);
            $(this).trigger('dateupdated');
        }
    }
});

Now we can hook up handlers for that custom event...

现在我们可以为该自定义事件连接处理程序......

$('body').on('dateupdated','.datetime', function(e) {
    // do something
});

回答by user583576

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

回答by NMathur

I am using bootstrap-datepicker and none of above solution worked for me. This answer helped me ..

我正在使用 bootstrap-datepicker，但上述解决方案均不适合我。这个答案帮助了我..

bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

手动编辑日期或清除日期时，引导程序日期选择器更改日期事件不会触发

Here is what I applied:

这是我申请的：

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

Hope this can help others.

希望这可以帮助其他人。

回答by seeeking

On jQueryUi 1.9 I've managed to get it to work through an additional data value and a combination of beforeShow and onSelect functions:

在 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 );
        }
    }
});

Works for me :)

对我有用:)

回答by tstrand66

I know this is an old question. But i couldnt get the jquery $(this).change() event to fire correctly onSelect. So i went with the following approach to fire the change event via vanilla js.

我知道这是一个老问题。但我无法让 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);
         }
     }
});

回答by GiorgosBarkos

Try :

尝试 ：

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

回答by mike tracker

Try this

尝试这个

$('#dateInput').datepicker({
 onSelect: function(){
       $(this).trigger('change');
      }
 }});

Hope this helps:)

希望这可以帮助：）