Tengo un campo con un selector de fecha. Quiero saber si está abierto. He probado con:

$("#filter_date").datepicker( "widget" ).is(":visible")

pero devuelve siempre la verdad.

¿Cómo puedo comprobar si está abierto?

5 Comentarios

  1. 34

    Esto podría ser un posible error en el pasado. Ahora esta solución

    $("#filter_date").datepicker( "widget" ).is(":visible")

    funciona perfectamente

    • La primera vez que el datepicker está conectado a un elemento, es invisible y, sin embargo, visible devuelve true. El elemento que aún no tenga la pantalla ninguno de estilo, pero es todavía oculto, y por desgracia, no se detecta en el código. Todavía, +1. 🙂
    • Ahh, en la primera carga, debe comprobar si es :vacío.
    • No funciona para mí. Ambos :vacío y :visible siempre devolverá true – antes de la primera vez que el datepicker se abre y siempre después.
    • tenga cuidado de que el hecho de que si usted tiene varias entradas con datepickers ligados a ellos, esto devolverá verdadero si alguno de ellos se muestra (de hecho, es el mismo elemento div para todos ellos), así que esto en realidad no nos dice si el selector de fecha para #filter_date es ser activo
  2. 9

    Simplemente establece:

    #ui-datepicker-div { display: none; }

    en su archivo CSS y su código:

    $("#filter_date").datepicker( "widget" ).is(":visible")

    funcionará correctamente!

  3. 4

    La parte superior de mi cabeza, yo podría pensar en el uso de la beforeShow y onClose eventos definidos para el control de selector de fecha para cambiar de una clase (o una bandera) en algún lugar, y la comprobación de la presencia de que para determinar si el datepicker de control está abierto o no.

  4. 1

    Acceder al selector de fecha del atributo de estilo, y compararlo con un estilo cuando datepicker está oculto (display: none):

    var datePickerStyle = $('.datepicker').attr('style');
    var noneStyle = 'display: none;';
    if(datePickerStyle.indexOf(noneStyle) != -1){
         console.log('shown');
    } else {
         console.log('not shown');
    }
    • Este es realmente bueno cuando usted necesita para poner a prueba si el elemento es visible, y ejecutar pruebas en phantomJS (.es(«:visible») no funciona para mí)
  5. 1
       var isCalendarVisible;     
       $(".datepicker).datepicker().on("show", function () {
              isCalendarVisible = true;
        }).on("hide", function () {
              isCalendarVisible = false;
        });

    He utilizado este enfoque para la conmutación de selector de fecha en el clic de un botón. isCalendarVisible que se está actualizando en ‘mostrar’ & ‘ocultar’ de selector de fecha en consecuencia. I comprobar el valor de ‘isCalendarVisible’ para abrir o cerrar manualmente .

        function toggleCalendar() {
            if (isCalendarVisible) {
                $(".datepicker .add-on").datepicker("hide");
            } else {
                $(".datepicker .add-on").datepicker("show");
            }
        }

Dejar respuesta

Please enter your comment!
Please enter your name here