首页 文章

jQuery Datepicker onchange事件问题

提问于
浏览 1002
199

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

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

14 回答

  • 321

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

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

    您可以使用datepicker的onSelect event .

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

    Live example

    jQuery(function($) {
    
      $(".date").datepicker({
        onSelect: function(dateText) {
          display("Selected date: " + dateText + "; input's current value: " + this.value);
        }
      }).on("change", function() {
        display("Got change event from field");
      });
    
      function display(msg) {
        $("<p>").html(msg).appendTo(document.body);
      }
    
    });
    
    <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <input type='text' class='date'>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    

    不幸的是,只要选择了日期, onSelect 就会触发,即使它没有改变 . 这是datepicker中的一个设计缺陷:它始终触发 onSelect (即使没有任何更改),并且在更改时不会触发基础输入上的任何事件 . (如果查看该示例的代码,我们将被引发 . )当事情发生变化时,它可能应该在输入上触发事件(可能是通常的 change 事件,或者可能是特定于日期选择器的事件) .


    如果您愿意,当然,您可以在 input 火上制作 change 事件:

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

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

    Live example

    jQuery(function($) {
    
      $(".date").datepicker({
        onSelect: function(dateText) {
          display("Selected date: " + dateText + "; input's current value: " + this.value);
          $(this).change();
        }
      }).on("change", function() {
        display("Got change event from field");
      });
    
      function display(msg) {
        $("<p>").html(msg).appendTo(document.body);
      }
    
    });
    
    <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <input type='text' class='date'>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    
  • 12

    我写这个是因为我需要一个解决方案,只有在日期改变时触发事件 .

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

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

    如果您使用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活动适合我

    希望这个帮助

  • 8

    T.J.克劳德的答案(https://stackoverflow.com/a/6471992/481154)非常好,仍然保持准确 . Triggering the change event within the onSelect function is as close as you're going to get.

    但是,在datepicker对象( lastVal )上有一个很好的属性,它允许你 conditionally trigger the change event only on actual changes 而不必自己存储值:

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

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

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

    我的解决方案是:

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

  • 3

    试试这个

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

    希望这可以帮助:)

  • 2

    我知道这是一个老问题 . 但我无法得到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); } } });

  • 2

    试试:

    $('#idPicker').on('changeDate', function() {
        var date = $('#idPicker').datepicker('getFormattedDate');
    });
    
  • 1
    $('#inputfield').change(function() { 
        dosomething();
    });
    
  • 1

    我正在使用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
        });
    

    希望这可以帮助别人 .

  • 1

    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

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

    适合我:)

  • 0

    手册说:

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

    适合我 .

相关问题