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

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

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

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

$(".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="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) и сравнить.

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

$(".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="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>

Ответ 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!
});

Вы ищете событие onSelect в объекте datepicker :

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

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

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

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

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

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

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

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

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

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

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

Работает для меня :)

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

Попробуй это

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

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

Пытаться :

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

Руководство говорит:

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

Работает для меня.

Мое решение:

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

Мое решение:

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

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

если вы используете 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 работает

надеюсь, это поможет

Я думаю, что ваша проблема может заключаться в том, как настроен ваш DatePicker. Почему бы вам не отключить вход ... не используйте 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
    });
});