jQuery Datepicker onchange事件问题-Java 学习之路

199

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

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

14 回答

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

回复于 2024-04-18T13:40:43+08:00

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!
});
```
回复于 2024-04-18T13:40:43+08:00
321
您在datepicker对象中查找onSelect事件：
```
$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});
```
回复于 2024-04-18T13:40:43+08:00

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

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

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

回复于 2024-04-18T13:40:43+08:00

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

回复于 2024-04-18T13:40:43+08:00

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
    });
```
希望这可以帮助别人 .
回复于 2024-04-18T13:40:43+08:00

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

适合我:)

回复于 2024-04-18T13:40:43+08:00

试试这个

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

希望这可以帮助：）

回复于 2024-04-18T13:40:43+08:00

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

回复于 2024-04-18T13:40:43+08:00

手册说：

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

适合我 .

回复于 2024-04-18T13:40:43+08:00

8

我的解决方案是：

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

回复于 2024-04-18T13:40:43+08:00

试试：

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

回复于 2024-04-18T13:40:43+08:00

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

回复于 2024-04-18T13:40:43+08:00

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

希望这个帮助

回复于 2024-04-18T13:40:43+08:00

jQuery Datepicker onchange事件问题

14 回答

相关问题