javascript - rango - datepicker limitar fecha

jqueryUI datepicker dispara el desenfoque de entrada antes de la fecha pasada, ¿evitar/solución?

Question

Tengo alguna validación en una entrada de texto vinculada a su evento borroso. Tengo un selector de fecha en este campo (la versión de jqueryUI), así que cuando hace clic en el campo, aparece el selector de fechas, luego hace clic en una fecha y rellena la fecha en el campo como lo hace el selector de fechas. Sin embargo, justo antes de que se ingrese la fecha, parece que el campo de entrada se activó por alguna razón. Parece que el enfoque desaparece de la entrada antes de que se complete la fecha. Por lo tanto, mi validación se activa justo en el momento en que el usuario selecciona una fecha, antes de que la fecha llegue al campo, cuando no debería hacerlo. Debería estar funcionando después de que se ponga la fecha. ¿Alguien sabe por qué el desenfoque ocurre en ese momento o cómo evitarlo?

Answer 1

Bump este hilo porque tuve algunas dificultades con la solución aceptada.

Me resultó más fácil desencadenar el evento ''cambio'' cuando se desencadena el evento ''onClose'' de datepicker. Esto asegura que el evento de cambio del elemento de entrada siempre se dispare:

$(''#my_element'').datepicker({
    onClose: function() {
        $(this).trigger(''change'');
    }
});

Esto puede parecer una tontería porque se activará cuando no se haya cambiado nada. Sin embargo, funciona de manera más confiable que el "onSelect" de datepicker y me ayudó a evitar problemas con los eventos de enfoque o desenfoque que se activan antes de los eventos del selector de fecha.

Answer 2

Crea tu evento personalizado en jquery y vincúlalo a un cuadro de texto. Después de eso, active el evento onClose event of datepicker. De este modo, si se muda fuera del cuadro de texto, se activará el evento personalizado.

$("inputText").bind(''CustomEventName'',function(){//your validate method code});

y en el selector de fechas

$("#inputText").datePicker({onClose:function(){ $(this).trigger(''CustomEventName'')});

Answer 3

Cuando el usuario hace clic fuera del campo de entrada (para elegir una fecha), el campo de entrada se desdibujará. No hay manera de evitar eso. Entonces, en lugar de desencadenar la validación en desenfoque, utilice la devolución de llamada onSelect del selector de fechas.

$(''.selector'').datepicker({
    onSelect: function(dateText) { /* validation here */ }
});

Si desea mantener sus eventos onblur, podría posponer la validación para permitir que el selector de fecha complete el campo antes de que se active la validación, como esto:

$(''#myform input'').blur(function () {
    setTimeout(function () { /* validation here */ }, 1);
});

El uso de setTimeout para manejar problemas de concurrencia puede parecer un truco, pero debido a la naturaleza de subproceso único de JavaScripts, funciona bastante bien. John Resig de jQuery-fame habla sobre esto en esta publicación de blog .

Answer 4

Encontré que la única forma de que los eventos de selección de selectores del teclado y del selector funcionaran consistentemente con el siguiente código:

 $(".date-picker")
            .datepicker("option", "onSelect", function (dateText, inst) {
                // User Method
            })
            .change(function () {
                // User Method
            });

El problema de usar solo el evento de desenfoque es que (cuando se selecciona) el selector de fecha activa el evento de desenfoque en la entrada antes de que se le pase el valor.

Answer 5

La respuesta de Magnars arriba es muy buena. Solo para dar más información para la progenie aquí también se incluye un enfoque que funciona bien con los marcos de validación que hacen validación en el desenfoque. En realidad, estoy desenlazando el evento de desenfoque que se configuró mediante la validación en document.ready / pageload (patrón bastante común para la validación), y luego lo vuelvo a colocar en la opción onclose datepicker. El evento de cierre de datepicker aparentemente ocurre después de que datepicker haya pasado la información al campo, por lo que está bien que la validación de desenfoque se ejecute en ese punto. De esta manera no tengo que hacer nada especial para el campo en el propio código de validación. Cualquiera de los dos enfoques es probablemente aplicable a lo que sea que alguien más esté haciendo si se encuentran con esto.

$(''#datefield'').datepicker(
{beforeShow: function(input) {
                             $(input).unbind(''blur'');
             },
 onClose: function(dateText, inst) {
                             $(this).validationEngine();this.focus();this.blur() }
});

(En mi marco ''.validationEngine ()'' es lo que registra los controladores de validación)

Answer 6

Puedes probar esto:

$(".date-pick").datepicker({
...
onSelect: function() {
this.focus();
},
onClose: function() {
this.blur();
}
...

Answer 7

Tuve el mismo problema que tú, y la respuesta de Magnar me ayudó, pero no respondió completamente el problema.

Has identificado la causa subyacente. La acción del usuario que interactúa con el calendario elimina el enfoque del campo de entrada. Esto (en el caso de la validación discreta de jquery) hará que se desencadene el evento onBlur, lo que desencadena la validación de ese campo de entrada. En este punto, el valor sigue siendo el valor anterior, hasta que el usuario selecciona algo.

Por lo tanto, basándose en la respuesta de Magnar, afirma que debe volver a validar el campo de entrada en Cambiar del calendario. La forma más obvia es llamar a $("form").valid() , sin embargo, esto valida todo el formulario.

Una forma mejor es simplemente validar el campo de entrada conectado al selector de fecha, y puede activarlo haciendo esto:

$(''#myform input'').blur(function () {
    var that = this;
    setTimeout(function () {
        $(that).trigger("focus").trigger("blur");
    }, 100);
});

Ahora solo se valida su campo de entrada, porque ha falsificado al usuario haciendo clic dentro y fuera del campo de entrada.