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

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


当前回答

我知道这是一个老问题。但是我不能得到jquery $(this).change()事件正确地点燃onSelect。所以我用下面的方法通过vanilla js来触发change事件。

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

其他回答

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

这是一个简单的解决办法。每次对话框关闭时,我们都会测试数据是否发生了变化。如果存在,则触发自定义事件并重置存储的值。

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

我知道这是一个老问题。但是我不能得到jquery $(this).change()事件正确地点燃onSelect。所以我用下面的方法通过vanilla js来触发change事件。

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

手册说:

apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked

So:

$('#daterange').daterangepicker({
  locale: { cancelLabel: 'Clear' }  
});

$('#daterange').on('apply.daterangepicker', function() {
  alert('worked!');
});

对我有用。

有些人可能正在使用XDSoft DateTimePicker https://xdsoft.net/jqplugins/datetimepicker/

这就是改变事件

onSelectDate: function(){
  alert('change date event);
}

https://xdsoft.net/jqplugins/datetimepicker/#onSelectDate

我认为你的问题可能在于你的约会选择器的设置。 你为什么不断开输入…不要使用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
    });
});