jQuery Datepicker onchange 事件问题答案

【问题标题】：jQuery Datepicker onchange event issuejQuery Datepicker onchange 事件问题
【发布时间】：2011-09-22 06:03:19
【问题描述】：

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

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

【问题讨论】：

我最终使用了stackoverflow.com/a/30132949/293792，因为这似乎直接回答了这个问题

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

您可以使用日期选择器的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>

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

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

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

对于通过 jQuery 连接的任何处理程序，这将在底层 input 上触发 change。但同样，它总是会触发它。如果您只想触发真正的更改，则必须保存以前的值（可能通过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="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>

【讨论】：

@user760092：我发布了这个答案然后出去了，当我离开时，我想“你知道，你可以触发 change 处理程序”，所以我更新了答案就是这样。 :-)
我转了一圈又一圈试图让它在所有情况下都能正常工作，这已经做到了！非常感谢！
为什么他们不制作这些实际事件？
@AndroidDev：我已经澄清过了。（你当然可以；该网站的目标是提供好的答案；鼓励尊重编辑以实现这一目标。）这是日期选择器的设计缺陷，不在答案中。（它应该做的是在输入上触发某种类型的更改事件，当且仅当更改日期时，但它不会。）
或者如果日期选择器已经初始化使用$(".date").datepicker('option', 'onSelect', function() { $(this).change(); } );

【解决方案2】：

T.J.克劳德的回答 (https://stackoverflow.com/a/6471992/481154) 非常好，并且仍然准确。 在 onSelect 函数中触发 change 事件已经很接近了。

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

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

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

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

【讨论】：

最近有人测试过这个吗？它对我不起作用。 i.lastVal 返回 undefined 并且它似乎不是可用属性之一。
我刚刚实现了这个，完全没有问题。像魅力一样工作。
这个不行了，lastval 不再定义
@luke_mclachlan lastVal 然而是 ;-)
lastVal 在 datepicker 对象上不存在，至少在我的测试中是这样。所以这个解决方案总会触发变化。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

我认为这应该可行，但不幸的是没有。它仅在使用键盘更改字段时触发，而不是在从日期选择器中选择时触发。烦人。
来自 jQuery UI 文档：“此小部件以编程方式操作其元素的值，因此当元素的值更改时可能不会触发本机更改事件。”
有趣的是我得到了相反 - 当我通过键盘手动更改输入时，不会触发任何事件。但是当我通过小部件更改字段的值时，会触发更改事件。奇数。
当我使用键盘进行更改以及使用日期选择器小部件进行更改时，这可以正常工作。
不知何故多次调用。

【解决方案5】：

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

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

$('.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 datepicker 字段的问题与此处发布的问题并不完全相同。这是关于多次触发的更改事件。我尝试了几种解决方案，这是唯一一种真正适用于我的情况的解决方案。
我的做法和这个解决方案差不多，我认为它绝对是最好的。我将在单独的答案中发布我所做的...

【解决方案6】：

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

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

这是我申请的：

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

希望这可以帮助其他人。

【讨论】：

【解决方案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);
         }
     }
});

【讨论】：

此 sn-p 的错误“'$' 未定义”。哦哦。
您在 onSelect 事件中调度了一个 change 事件，这并不是理想的效果，因为每次单击日期时都会触发 select 但这并不一定意味着日期实际上已更改，即用户可能两次点击了相同的日期。
@Jacques 你是对的。我相信您可以将 String dateText 与 this.value 进行比较，并且只有在它们不同时才触发它。
@Michael12345 我明白你的意思。我已经对其进行了修改，使其不再是 sn-p。我很抱歉。

【解决方案8】：

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

为我工作:)

【讨论】：

【解决方案9】：

试试：

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

【讨论】：

【解决方案10】：

试试这个

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

希望这会有所帮助:)

【讨论】：

【解决方案11】：

手册说：

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

所以：

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

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

为我工作。

【讨论】：

【解决方案12】：

我的解决方案：

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

【讨论】：

【解决方案13】：

我的解决办法是：

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

【讨论】：

【解决方案14】：

我认为您的问题可能在于您的日期选择器是如何设置的。为什么不断开输入...不要使用altField。而是在 onSelect 触发时显式设置值。这将使您能够控制每次交互；用户文本字段和日期选择器。

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

【讨论】：

【解决方案15】：

下面的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);        
            });

【讨论】：

【解决方案16】：

如果您使用 wdcalendar，这将对您有所帮助

 $("#PatientBirthday").datepicker({ 
        picker: "<button class='calpick'></button>",
        onReturn:function(d){
          var today = new Date();
          var birthDate = d;
          var age = today.getFullYear() - birthDate.getFullYear();
          var m = today.getMonth() - birthDate.getMonth();
          if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
          }

          $('#ageshow')[0].innerHTML="Age: "+age;
          $("#PatientBirthday").val((d.getMonth() + 1) + '/' + d.getDate() + '/' +  d.getFullYear());
        }
      });

onReturn 事件对我有用

希望有帮助

【讨论】：

【解决方案17】：

这种方法很简单，并且每次都适用于文本框控件。 $('#controlID').on('changeDate', function() { $(this).change(); });

【讨论】：

【解决方案18】：

你们中的一些人可能正在使用名为 XDSoft DateTimePicker https://xdsoft.net/jqplugins/datetimepicker/ 的东西

在那里，更改事件是

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

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

【讨论】：

这个问题是关于 jQuery UI DatePicker 组件的。我知道这里有许多其他插件的答案，但这些答案应该放在适当标记的单独问题中。
我来到这里以为我在使用 jQuery UI DatePicker，因为它们看起来完全一样，.datetimepicker({..})。只有通过浏览答案，我才发现我的插件实际上是一个不同的插件，类似于 Bootstrap。所以这是一个有效的帖子。