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

由于某种原因,当Datepicker更新字段时,没有调用更改事件。当日历弹出时,它会改变焦点,所以我也不能使用它。什么好主意吗?


当前回答

我认为你的问题可能在于你的约会选择器的设置。 你为什么不断开输入…不要使用altField。相反,当onSelect触发时显式地设置值。这将让你能够控制每一次互动;用户文本字段和datepicker。

注意:有时你必须在.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
    });
});

其他回答

我的soluthion:

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

T.J.克劳德(T.J. Crowder)的答案(https://stackoverflow.com/a/6471992/481154)非常好,而且仍然很准确。在onSelect函数中触发更改事件是最接近的方法。

然而,在datepicker对象(lastVal)上有一个很好的属性,它允许你只在实际更改时有条件地触发更改事件,而不必自己存储值:

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

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

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

DatePicker选择的值更改事件代码如下

/* HTML Part */
<p>Date: <input type="text" id="datepicker"></p>

/* jQuery Part */
$("#datepicker").change(function() {
                selectedDate= $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
                alert(selectedDate);        
            });

我的解决方案是:

events: {
    'apply.daterangepicker #selector': 'function'
}

你可以使用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>