Problema dell'evento onchange di jQuery Datepicker

Ho un codice JS in cui quando cambi un campo chiama una routine di ricerca. Il problema è che non riesco a trovare alcun evento jQuery che si attivi quando Datepicker aggiorna il campo di input.

Per qualche motivo, un evento di modifica non viene chiamato quando Datepicker aggiorna il campo. Quando viene visualizzato il calendario, cambia lo stato attivo, quindi non posso nemmeno usarlo. Qualche idea?

Puoi usare l' onSelectevento del datepicker .

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

Esempio live :

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

Sfortunatamente, viene onSelectgenerato ogni volta che viene selezionata una data, anche se non è cambiata. Questo è un difetto di progettazione nel datepicker: si attiva sempre onSelect(anche se non è cambiato nulla) e non attiva alcun evento sull'input sottostante al cambiamento. (Se guardi nel codice di quell'esempio, stiamo ascoltando le modifiche, ma non vengono sollevate.) Probabilmente dovrebbe changegenerare un evento sull'input quando cambiano le cose (forse il solito evento, o forse un datepicker- uno specifico).

Se ti piace, ovviamente, puoi rendere l' changeevento sul inputfuoco:

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

Ciò si attiverà changesul sottostante inputper qualsiasi gestore collegato tramite jQuery. Ma di nuovo, lo spara sempre . Se vuoi sparare solo su un vero cambiamento, dovrai salvare il valore precedente (possibilmente via data) e confrontare.

Esempio live :

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

La risposta di TJ Crowder ( https://stackoverflow.com/a/6471992/481154 ) è molto buona e rimane ancora accurata. L'attivazione dell'evento di modifica all'interno della funzione onSelect è il più vicino possibile.

Tuttavia, esiste una bella proprietà sull'oggetto datepicker ( lastVal) che ti consentirà di attivare condizionalmente l'evento change solo sulle modifiche effettive senza dover memorizzare tu stesso i valori:

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

Quindi gestisci gli eventi di modifica come al solito:

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

La vostra ricerca del onSelect evento nell'oggetto datepicker:

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

Ho scritto questo perché avevo bisogno di una soluzione per attivare un evento solo se la data è cambiata.

È una soluzione semplice Ogni volta che la finestra di dialogo viene chiusa, verifichiamo se i dati sono stati modificati. In tal caso, attiviamo un evento personalizzato e ripristiniamo il valore memorizzato.

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

Ora possiamo collegare i gestori per quell'evento personalizzato ...

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

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

Sto usando bootstrap-datepicker e nessuna delle soluzioni precedenti ha funzionato per me. Questa risposta mi ha aiutato ..

L'evento di modifica della data di bootstrap datepicker non si attiva quando si modificano manualmente le date o la data di cancellazione

Ecco cosa ho applicato:

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

Spero che questo possa aiutare gli altri.

Su jQueryUi 1.9 sono riuscito a farlo funzionare attraverso un valore di dati aggiuntivo e una combinazione di funzioni beforeShow e 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 );
        }
    }
});

Per me va bene :)

So che questa è una vecchia domanda. Ma non sono riuscito a far sì che l'evento jquery $ (this) .change () si attivasse correttamente su Seleziona. Quindi sono andato con il seguente approccio per lanciare l'evento change tramite 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);
         }
     }
});

Prova questo

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

Spero che questo ti aiuti:)

Provare :

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

Il manuale dice:

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

Così:

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

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

Per me va bene.

La mia solitudine:

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

La mia soluzione è:

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

DatePicker ha selezionato il codice evento di modifica del valore di seguito

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

se stai usando wdcalendar questo ti aiuterà

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

l'evento onReturn funziona per me

spero che questo aiuto

Penso che il tuo problema potrebbe risiedere nel modo in cui è impostato il tuo datepicker. Perché non scollegare l'ingresso ... non usare altField. Invece imposta esplicitamente i valori quando viene attivato onSelect. Questo ti darà il controllo di ogni interazione; il campo di testo dell'utente e il datepicker.

Nota: a volte devi chiamare la routine su .change () e non .onSelect () perché onSelect può essere chiamato su interazioni diverse che non ti aspetti.

Codice pseudo:

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