not - Problema de evento jQuery Datepicker onchange

jquery ui datepicker es js

Question

Tengo un código JS en el que cuando cambias un campo se llama una rutina de búsqueda. El problema es que no puedo encontrar ningún evento jQuery que se activará cuando el Selector de fechas actualice 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?

Answer 1

DatePicker seleccionó el código de evento de cambio de valor 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);        
            });

Answer 2

En jQueryUi 1.9 logré que funcionara 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 :)

Answer 3

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, comprobamos 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 manejadores para ese evento personalizado ...

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

Answer 4

Estás buscando el evento onSelect en el objeto datepicker:

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

Answer 5

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

el evento de la fecha de cambio del selector de fecha del arranque no se inicia cuando se editan manualmente las fechas o se borran

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.

Answer 6

La respuesta de TJ Crowder ( https://.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 cerca que se va a llegar.

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

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

Entonces solo maneja los eventos de cambio como es normal:

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

Answer 7

Manual dice:

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

Asi que:

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

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

Funciona para mi.

Answer 8

Mi solución es:

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

Answer 9

Prueba esto

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

Espero que esto ayude:)

Answer 10

Sé que esta es una vieja pregunta. Pero no pude obtener el evento jquery $ (this) .change () para activarlo correctamente enSeleccionar. Así que seguí el siguiente enfoque para disparar 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); } } });

Answer 11

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 funciona para mi

espero que esto ayude

Answer 12

Tratar :

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

Answer 13

Puede utilizar el evento onSelect del onSelect de onSelect .

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

Ejemplo en vivo :

jQuery(function($) {

  $(".date").datepicker({
    onSelect: function(dateText) {
      display("Selected date: " + dateText + "; input''s current value: " + this.value);
    }
  }).on("change", function() {
    display("Got change event from field");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<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, onSelect siempre que se selecciona una fecha, incluso si no ha cambiado. Este es un defecto de diseño en el onSelect : siempre se onSelect (incluso si nada cambió), y no onSelect 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 activar un evento en la entrada cuando las cosas cambian (posiblemente el evento de change habitual, o posiblemente un selector de fecha). -específico).

Si lo desea, por supuesto, puede hacer que el evento de change en la input active:

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

Eso activará el change en la input subyacente para cualquier controlador conectado a través de jQuery. Pero de nuevo, siempre lo dispara. Si solo quiere disparar un cambio real, deberá guardar el valor anterior (posiblemente a través de data ) y comparar.

Ejemplo en vivo :

jQuery(function($) {

  $(".date").datepicker({
    onSelect: function(dateText) {
      display("Selected date: " + dateText + "; input''s current value: " + this.value);
      $(this).change();
    }
  }).on("change", function() {
    display("Got change event from field");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<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>

Answer 14

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