Проблема события обмена JQuery Datepicker

Question

У меня есть JS-код, в котором при изменении поля он вызывает процедуру поиска. Проблема в том, что я не могу найти какие-либо события jQuery, которые сработают, когда Datepicker обновит поле ввода.

По какой-то причине событие изменения не вызывается, когда Datepicker обновляет поле. Когда календарь всплывает, он меняет фокус, поэтому я тоже не могу его использовать. Есть идеи?

Answer 1

Вы можете использовать событие onSelect DatePicker .

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

Живой пример :

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 срабатывает каждый раз, когда выбрана дата, даже если она не изменилась.Это недостаток дизайна в указателе даты: он всегда запускает onSelect (даже если ничего не изменилось), а не запускает какое-либо событие на базовом входе при изменении.(Если вы посмотрите код этого примера, мы выслушиваем изменения, но они не вызываются.) Вероятно, он должен вызывать событие на входе при изменении ситуации (возможно, обычное событие change или, возможно,специфический для средства выбора даты).

---

Если вы хотите, конечно, вы можете сделать событие change на пожаре input:

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

, которое сработаетchange на базовом input для любого обработчика, подключенного через jQuery.Но опять же, он всегда запускает его.Если вы хотите активировать только реальные изменения, вам нужно сохранить предыдущее значение (возможно, через data) и сравнить.

Живой пример :

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>

Answer 2

TJ Crowder ответ (https://stackoverflow.com/a/6471992/481154) очень хороший и все еще остается точным. Запуск события изменения в функции onSelect настолько близок, насколько вы собираетесь получить.

Однако в объекте datepicker есть замечательное свойство (lastVal), которое позволит вам условно инициировать событие изменения только при реальных изменениях без необходимости сохранять значения (значений) самостоятельно:

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

Тогда просто обработайте события изменения как обычно:

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

Answer 3

Вы ищете событие onSelect в объекте выбора даты:

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

Answer 4

Я написал это, потому что мне нужно было решение для запуска события, только если дата изменилась.

Это простое решение. Каждый раз, когда диалоговое окно закрывается, мы проверяем, изменились ли данные. Если это так, мы запускаем пользовательское событие и сбрасываем сохраненное значение.

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

Answer 5

Я использую bootstrap-datepicker, и ни одно из вышеуказанных решений не помогло мне.Этот ответ помог мне ..

событие даты изменения начальной загрузки начальной загрузки не запускается при ручном редактировании дат или очистке даты

Вот что я применил:

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

Надеюсь, что это может помочь другим.

Answer 6

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

Answer 7

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

у меня работает :) 1004 *

Answer 8

Я знаю, что это старый вопрос.Но я не смог получить событие 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);
         }
     }
});

Answer 9

Попробуйте:

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

Answer 10

Попробуйте это

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

Надеюсь, это поможет:)