Saltar al contenido

jQuery Datepicker sobre el problema del evento de cambio

Te damos la bienvenida a nuestra comunidad, aquí encontrarás la resolución a lo que estás buscando.

Solución:

Puede utilizar el selector de fecha onSelect evento.

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



Desafortunadamente, onSelect se activa 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 cambió), y no disparar cualquier evento en la entrada subyacente en el cambio. (Si observa el código de ese ejemplo, estamos escuchando los cambios, pero no se generan). Probablemente debería activar un evento en la entrada cuando las cosas cambian (posiblemente lo habitual change evento, o posiblemente uno específico del selector de fechas).


Si lo desea, por supuesto, puede hacer el change evento en el input fuego:

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

eso disparará change en 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");
);



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 cerca que vas a estar.

Sin embargo, hay una buena propiedad 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();
          
     
);

Luego, simplemente maneje los eventos de cambio como de costumbre:

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

Está buscando el evento onSelect en el objeto datepicker:

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

Valoraciones y comentarios

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *