Problema de evento de cambio de jQuery Datepicker

Tengo un código JS en el que cuando cambias un campo llama a una rutina de búsqueda. El problema es que no puedo encontrar ningún evento jQuery que se active cuando Datepicker actualiza el campo de entrada.

Por alguna razón, no se llama a un evento de cambio cuando Datepicker actualiza el campo. Cuando aparece el calendario, cambia el enfoque, así que tampoco puedo usarlo. ¿Algunas ideas?

Puedes usar el onSelectevento datepicker .

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

Ejemplo en vivo :

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

Desafortunadamente, se onSelectdispara cada vez que se selecciona una fecha, incluso si no ha cambiado. Esta es una falla de diseño en el selector de fechas: siempre se dispara onSelect(incluso si nada ha cambiado), y no dispara ningún evento en la entrada subyacente en el cambio. (Si observa el código de ese ejemplo, estamos escuchando los cambios, pero no se están generando). Probablemente debería disparar un evento en la entrada cuando las cosas cambian (posiblemente el changeevento habitual , o posiblemente un selector de fecha- uno específico).

Si lo desea, por supuesto, puede hacer que el changeevento en el inputfuego:

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

Eso se disparará changeen el subyacente inputpara cualquier controlador conectado a través de jQuery. Pero de nuevo, siempre lo dispara. Si solo desea activar un cambio real, deberá guardar el valor anterior (posiblemente a través de data) y comparar.

Ejemplo en vivo :

$(".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 respuesta de TJ Crowder ( https://stackoverflow.com/a/6471992/481154 ) es muy buena y sigue siendo precisa. Activar el evento de cambio dentro de la función onSelect es lo más cercano que va a llegar.

Sin embargo, hay una buena propiedad en el objeto datepicker ( lastVal) que le permitirá activar condicionalmente el evento de cambio solo en cambios reales sin tener que almacenar los valores usted mismo:

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

Luego solo maneje los eventos de cambio como lo normal:

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

Está buscando el evento onSelect en el objeto datepicker:

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

Escribí esto porque necesitaba una solución para activar un evento solo si la fecha cambiaba.

Es una solución simple. Cada vez que se cierra el cuadro de diálogo, probamos para ver si los datos han cambiado. Si es así, activamos un evento personalizado y restablecemos el valor almacenado.

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

Ahora podemos conectar controladores para ese evento personalizado ...

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

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

Estoy usando bootstrap-datepicker y ninguna de las soluciones anteriores funcionó para mí. Esta respuesta me ayudó ...

el evento de fecha de cambio de selector de fecha de arranque no se activa al editar fechas manualmente o borrar la fecha

Esto es lo que apliqué:

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

Espero que esto pueda ayudar a otros.

En jQueryUi 1.9 he logrado que funcione a través de un valor de datos adicional y una combinación de las funciones beforeShow y 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 );
        }
    }
});

Funciona para mi :)

Sé que esta es una vieja pregunta. Pero no pude hacer que el evento jquery $ (this) .change () se active correctamente en Select. Así que seguí el siguiente enfoque para activar el evento de cambio a través de 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);
         }
     }
});

Prueba esto

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

Espero que esto ayude:)

Tratar :

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

El manual dice:

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

Entonces:

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

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

Funciona para mi.

Mi soluthion:

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

Mi solución es:

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

Código de evento de cambio de valor seleccionado de DatePicker a continuación

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

si estás usando wdcalendar esto te ayudará

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

el evento onReturn me funciona

espero que esto ayude

Creo que su problema puede estar en cómo se configura su selector de fechas. ¿Por qué no desconecta la entrada? No use altField. En su lugar, establezca explícitamente los valores cuando se active onSelect. Esto te dará el control de cada interacción; el campo de texto del usuario y el selector de fecha.

Nota: a veces debe llamar a la rutina en .change () y no en .onSelect () porque onSelect se puede invocar en diferentes interacciones que no espera.

Pseudocódigo:

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