jQuery Datepicker onchange 事件问题 [英] jQuery Datepicker onchange event issue

问题描述

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

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.

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

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 的 onSelect 事件.

You can use the datepicker's onSelect event.

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

Unfortunately, onSelect fires whenever a date is selected, even if it hasn't changed.这是日期选择器中的一个设计缺陷:它总是触发 onSelect(即使没有任何更改)，并且不会在更改时触发底层输入的任何事件.(如果您查看该示例的代码，我们正在侦听更改，但并未引发更改.)当事情发生变化时，它可能应该在输入上触发一个事件(可能是通常的 change 事件，或者可能是特定于日期选择器的事件).

Unfortunately, onSelect fires 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't fire 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 change event, or possibly a datepicker-specific one).

如果你愿意，当然，你可以在 input 上触发 change 事件:

If you like, of course, you can make the change event on the input fire:

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

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

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

实例:

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

这篇关于jQuery Datepicker onchange 事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！