Проблема події jcuery Datepicker про зміну події

У мене є JS-код, в якому при зміні поля він викликає процедуру пошуку. Проблема полягає в тому, що я не можу знайти жодних подій jQuery, які запускаються, коли Datepicker оновить поле введення.

Чомусь подія зміни не викликається, коли Datepicker оновлює поле. Коли спливає календар, він змінює фокус, тому я також не можу його використовувати. Будь-які ідеї?

Ви можете використовувати onSelectподію датника .

$(".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 в об’єкті вибору дати:

$('.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 працює для мене

сподіваюся, що ця допомога

Я думаю, що ваша проблема може полягати в налаштуванні вашої дати вибору. Чому ви не відключите вхід ... не використовуйте 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
    });
});