jQuery Datepicker onchange事件问题


239

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

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


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

Answers:


370

您可以使用datepicker的onSelectevent

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

现场示例

不幸的onSelect是,即使选择了某个日期,也不会触发它。这是datepicker中的一个设计缺陷:它始终会触发onSelect(即使未进行任何更改),并且不会在更改的基础输入上触发任何事件。(如果您查看该示例的代码,我们正在侦听更改,但未提出更改。)当事情发生更改时,它可能应该在输入上触发一个事件(可能是通常的change事件,或者可能是日期选择器-具体的一个)。


当然,如果您愿意,可以将change事件设置为input紧急状态:

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

对于通过jQuery连接的任何处理程序,这都会change在底层触发input。但是,它总是会触发它。如果您只想触发实际更改,则必须保存先前的值(可能通过data)并进行比较。

现场示例


1
@ user760092:我发布了这个答案,然后走了出去,在我离开的时候,我以为“您知道,您可以触发change处理程序”,所以我用这个更新了答案。:-)
TJ Crowder

1
我已经走了很多圈,试图使它在所有情况下都能正常工作,并且做到了!非常感激!
克里斯·内维尔

7
他们为什么没有在世界上做出这些实际的事件?
杰伊·K

1
这是用于“选择”而不是“更改”。如果您选择一个日期然后重新选择它,则会触发此事件。一些开发人员将想知道日期何时从某个初始状态更改,以了解数据是否“脏”并需要保存。出于这个原因,我对此表示反对。
AndroidDev 2014年

4
@AndroidDev:我已经澄清了。(当然,可能会拥有该站点的目标,就是要有一个好的答案;应鼓励进行尊重的编辑。)这是日期选择器中的一个设计缺陷,而不是答案中的缺陷。(应该做的是,当且仅当更改日期时,才在输入上触发某种类型的更改事件,但事实并非如此。)
TJ Crowder 2014年

67

TJ Crowder的答案(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,它似乎不是可用属性之一。
BK 2014年

我只是实现了这一点而已。奇迹般有效。
DevSlick 2014年

这不再起作用,不再定义
lastval

4
@luke_mclachlan lastVal是;-)
亚历山大·德克

lastVal至少在我的测试中,datepicker对象上不存在。因此,此解决方案将始终触发更改。
尼古拉斯

13

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

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

11

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

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

$('.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字段问题与此处发布的问题不完全相同。它与更改事件多次触发有关。我尝试了几种解决方案,这是在我的情况下唯一有效的解决方案。
Patee Gutee

我所做的与该解决方案大致相同,我认为它肯定是最好的。我将在一个单独的答案中发布我所做的事情……

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

14
我认为这应该可行,但不幸的是,它不可行。仅当使用键盘更改字段时才触发,而不是从日期选择器中选择时触发。烦死了
西蒙东

1
来自jQuery UI文档:“此小部件以编程方式操纵其元素的值,因此,当元素的值更改时,可能不会触发本地更改事件。”
山姆考夫曼

有趣的是,我得到的恰恰相反 -当我通过键盘手动更改输入时,不会触发任何事件。但是,当我通过小部件更改字段的值时,将触发change事件。奇。
雷南2014年

当我使用键盘进行更改以及使用日期选择器小部件进行更改时,这种方法可以正常工作。
The Sammie

不知何故,这多次调用。
NMathur '17


4

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

为我工作:)


4

我知道这是一个老问题。但是我无法让jquery $(this).change()事件正确触发onSelect。因此,我采用了以下方法通过香草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);
         }
     }
});

此代码段错误“'$'未定义”。哦哦
Michael12345 '16

您在onSelect事件中调度了一个change事件,这并不是期望的效果,因为select将在每次单击日期时触发,但是不一定意味着实际更改了日期,即用户可能单击了同一日期两次。
雅克

@雅克你是正确的。我相信您可以将String dateText与this.value进行比较,并且仅在它们不同时才触发它。
tstrand66 '18

@ Michael12345我明白你的意思了。我已经对其进行了修改,以使其不再是摘要。我很抱歉。
tstrand66 '18年

3

试试这个

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

希望这可以帮助:)



1

手册说:

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

为我工作。


1

我的测:

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


0

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

0

如果您正在使用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事件对我有用

希望这个帮助


0

我认为您的问题可能在于如何设置日期选择器。为什么不断开输入...请不要使用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
    });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.