jQuery Datepicker problem zdarzenia wymiany

Mam kod JS, w którym po zmianie pola wywoływana jest procedura wyszukiwania. Problem polega na tym, że nie mogę znaleźć żadnych zdarzeń jQuery, które uruchomią się, gdy Datepicker zaktualizuje pole wejściowe.

Z jakiegoś powodu zdarzenie zmiany nie jest wywoływane, gdy Datepicker aktualizuje pole. Po wyświetleniu kalendarza zmienia się fokus, więc nie mogę z niego korzystać. Jakieś pomysły?

Możesz użyć onSelectzdarzenia datepicker .

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

Przykład na żywo :

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

Niestety, onSelectodpala po każdym wybraniu daty, nawet jeśli się nie zmieniła. Jest to wada projektowa w datepicker: zawsze uruchamia się onSelect(nawet jeśli nic się nie zmieniło) i nie wywołuje żadnego zdarzenia na podstawie danych wejściowych przy zmianie. (Jeśli spojrzysz na kod z tego przykładu, szukamy zmian, ale nie są one podnoszone.) Prawdopodobnie powinno to wywołać zdarzenie na wejściu, gdy coś się zmieni (być może zwykłe changezdarzenie lub być może datepicker- konkretny).

Jeśli chcesz, możesz oczywiście zrobić changezdarzenie w inputogniu:

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

To uruchomi changebazę inputdla każdego modułu obsługi podłączonego przez jQuery. Ale znowu to zawsze odpala. Jeśli chcesz strzelać tylko na prawdziwą zmianę, musisz zapisać poprzednią wartość (być może poprzez data) i porównać.

Przykład na żywo :

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

Odpowiedź TJ Crowdera ( https://stackoverflow.com/a/6471992/481154 ) jest bardzo dobra i nadal pozostaje dokładna. Wywołanie zdarzenia zmiany w funkcji onSelect jest tak blisko, jak to tylko możliwe.

Istnieje jednak ładna właściwość obiektu datepicker ( lastVal), która pozwoli warunkowo wywołać zdarzenie zmiany tylko w przypadku rzeczywistych zmian bez konieczności samodzielnego przechowywania wartości (wartości):

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

Następnie po prostu obsługuj zdarzenia zmiany jak normalnie:

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

Twój szuka onSelect imprezy w obiekcie datepicker:

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

Napisałem to, ponieważ potrzebowałem rozwiązania, aby wywołać zdarzenie tylko w przypadku zmiany daty.

To proste rozwiązanie. Za każdym razem, gdy okno dialogowe się zamyka, testujemy, czy dane się zmieniły. Jeśli tak, uruchamiamy niestandardowe zdarzenie i resetujemy zapisaną wartość.

$('.datetime').datepicker({
    onClose: function(dateText,datePickerInstance) {
        var oldValue = $(this).data('oldValue') || "";
        if (dateText !== oldValue) {
            $(this).data('oldValue',dateText);
            $(this).trigger('dateupdated');
        }
    }
});

Teraz możemy podłączyć moduły obsługi tego niestandardowego zdarzenia ...

$('body').on('dateupdated','.datetime', function(e) {
    // do something
});

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

Korzystam z bootstrap-datepicker i żadne z powyższych rozwiązań nie działało dla mnie. Ta odpowiedź pomogła mi ..

bootstrap datepicker zmiana daty zdarzenie nie uruchamia się podczas ręcznej edycji dat lub czyszczenia daty

Oto, co zastosowałem:

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

Mam nadzieję, że to może pomóc innym.

W jQueryUi 1.9 udało mi się sprawić, aby działał poprzez dodatkową wartość danych oraz kombinację funkcji beforeShow i 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 );
        }
    }
});

Pracuje dla mnie :)

Wiem, że to stare pytanie. Ale nie mogłem pobrać zdarzenia jquery $ (this) .change (), aby poprawnie uruchomić onSelect. Więc zastosowałem następujące podejście do uruchomienia zdarzenia zmiany za pośrednictwem waniliowej wersji 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);
         }
     }
});

Spróbuj tego

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

Mam nadzieję że to pomoże:)

Próbować :

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

Podręcznik mówi:

apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked

Więc:

$('#daterange').daterangepicker({
  locale: { cancelLabel: 'Clear' }  
});

$('#daterange').on('apply.daterangepicker', function() {
  alert('worked!');
});

Pracuje dla mnie.

Moje rozwiązanie:

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

Moje rozwiązanie to:

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

DatePicker zaznaczony kod zdarzenia zmiany wartości poniżej

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

jeśli używasz wdcalendar, to ci pomoże

 $("#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());
        }
      }); 

Wydarzenie onReturn działa dla mnie

Mam nadzieję, że to pomoże

Myślę, że twój problem może polegać na konfiguracji selektora dat. Dlaczego nie odłączysz wejścia ... nie używaj altField. Zamiast tego jawnie ustaw wartości podczas uruchamiania onSelect. To da ci kontrolę nad każdą interakcją; pole tekstowe użytkownika i datepicker.

Uwaga: Czasami musisz wywołać procedurę na .change (), a nie na .onSelect (), ponieważ onSelect można wywoływać przy różnych interakcjach, których się nie spodziewasz.

Pseudo kod:

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