Tengo un selector de fecha que se utiliza en el diálogo jQuery objeto. La fuente del cuadro de diálogo contenido de la carga mediante .load(). En el cuadro de diálogo que he creado un script que crea un selector de fecha para la entrada de texto.

$("#date").datepicker({ ... });

Cuando yo abra el cuadro de diálogo para la primera vez – todo está bien, pero si debo cerrar y volver a abrir de nuevo, el datepicker se activa automáticamente (y no hay una opción como autoOpen:false)
Hay alguna forma de evitar esto o lo estoy haciendo mal?

InformationsquelleAutor turezky | 2009-05-31

12 Comentarios

  1. 15

    Tuve este mismo problema y resuelto con sólo una ligera variación en tvanfosson de la técnica. Por alguna razón tuve que adjuntar manualmente el evento «click» para el datepicker de campo de la siguiente manera.

     $('#dialog').dialog({
     open: function(event, ui) {
        $(ui).find('#date').datepicker().click(function(){
            $(this).datepicker('show');
        });
     },
     close: function(event,ui) {
        $(ui).find('#date').datepicker('destroy');
     }});

    (Lo siento, he preferido publicar esto como un comentario a tvanfosson del post, pero no tienen los requisitos rep.)

    • Solución agradable, aunque he tenido que cambiar la interfaz de usuario para este. Esto es necesario cuando no se tiene el cuadro de diálogo listo (en DOM), pero construir dinámicamente con JS.
  2. 32

    Manera mucho más sencilla que he encontrado:

    $("#dialogPopper").click(
                        function() {
                            $("#date").datepicker("disable");
                            $("#dialog").dialog("open");
                            $("#date").datepicker("enable");
                            return false;
                        }
                      );
    • esto funciona. muy bonita y sencilla.
    • Mi diálogo tiene un ajax resultado así que tuve que agregar <movilidad: true> en mi datepicker de opciones y después de <cuadro de diálogo.(«abrir»)> he añadido <datepicker(«enable»)>. Funciona como un encanto.
    • Esto funcionó muy bien para mí, saludos!
    • +1 por simplicidad.
    • No tiene idea de por qué, pero no cualquier propuesta de solución que funcionó para mí. He contenido cargado mediante AJAX y $(document).on('focus', 'input.datepicker', function () ... – configuración de ‘desactivar’ y no ‘enable’ al AJAX el contenido cargado y se anexa marcado, ‘desactivar’ de nuevo – cuando el diálogo se cierra. Valor ahora es que no ha cambiado en absoluto cuando se selecciona en el calendario – se mantuvo abierto.
    • Trabajó como un encanto! Gracias a partir de 2016

  3. 23

    Cuando ponga el selector de fechas de campo en el comienzo del cuadro de diálogo se abre automáticamente. Usted puede colocar una entrada ocultos en el comienzo del cuadro de diálogo.

    <input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>
    • esta es la única solución viable cuando el modal es en el de cualquier otro plugin, a menos que usted desea modificar su plugin
    • Bonito gueto técnica. Yo tenía alguna entrada antes, pero eran type hidden y parece que no cuenta. La adición de un inútil de entrada antes de las grandes obras, pero aún así, añadir inútil elemento de dom y cuando publique su forma, tiene este valor para nada.
  4. 8

    Usted puede ser que desee pensar acerca de la destrucción de la datepicker cuando el cuadro de diálogo se cierra y la creación en el abierto de controlador de eventos para el diálogo en lugar de hacerlo como una secuencia de comandos en el cuadro de diálogo de creación.

     $('#dialog').dialog({
         open: function(event, ui) {
            $(ui).find('#date').datepicker();
         },
         close: function(event,ui) {
            $(ui).find('#date').datepicker('destroy');
         }
     });

    También puede experimentar con diferentes eventos y métodos para ver si usted realmente necesidad de volver a crear, pero yo creo que esto funcionaría.

    • He intentado esto, y no funciona 🙁 Puede ser debido a la carga de contenido mediante ajax como: $(‘#dialog»).load({ …}).dialog({ …}); ?
    • Lo que no funciona-es el selector de fecha, no se crea o hace aparecer aún cuando reabrió? Tal vez usted debe registrar el código completo.
    • gracias tvanfosson.Funciona.
  5. 5

    La razón es : el primer elemento dentro de formulario modal es el datepicker de campo de texto, y cuando el modal es despedido, el control activo es el que contiene el selector de fecha.

    He encontrado dos soluciones alternativas:

    1. Cambiar el orden de los campos. Evitar el uno con el selector de fecha para permanecer en el primer lugar.

    2. No establece selector de fecha para el campo en una pieza separada de código, hacerlo dentro de la función que abre el cuadro de diálogo (a la derecha después de la inauguración $("#dialog").dialog("open");).

  6. 4

    La razón selector se abre por sí sola, es que el campo de entrada se mantiene enfocado después de abrir el selector de por primera vez.

    Es necesario blur es:

    $input.datepicker({
      onClose: function(dateText) {
        $(this).trigger('blur');
      }
    });
    • Bonito y sencillo, me llamó el desenfoque justo después de abierto el cuadro de diálogo llamada y resolvió mi problema.
  7. 2

    Yo estaba teniendo un problema similar. Tengo un datepicker de jquery dentro de una interfaz de usuario jquery diálogo. El selector de fecha, era la apertura automáticamente en IE cuando he abierto el cuadro de diálogo. No estaba haciendo eso en Firefox o Chrome… me ha solucionado el problema deshabilitando el selector de fecha a partir de la creación en el $(document).listo así:

    $('.ConfirmMove #from').datepicker({
      duration: ''
    }).datepicker('disable');

    Luego, cuando estaba abriendo el cuadro de diálogo que contiene este datepicker que se permitió en el controlador de eventos abrir el cuadro de diálogo:

    $(".ConfirmMove").dialog({
      close: function() { 
         $('.ConfirmMove #from').datepicker('disable'); 
      },
      open: function() {
         $('.ConfirmMove #from').datepicker('enable');
      }
    });

    Usted también tiene que recordar para desactivar de nuevo al cerrar el cuadro de diálogo.

    De esta manera usted también no destruir y volver a crear el selector de fecha cada vez que abra y cierre el cuadro de diálogo.

  8. 2

    Es sólo de diálogo de enfoque: api.jqueryui.com/dialog/

    Al abrir un cuadro de diálogo, el foco se mueve automáticamente a la primer elemento que coincida con la siguiente

    1. El primer elemento en el cuadro de diálogo con el atributo autofocus
    2. La primera :tabbable elemento en el cuadro de diálogo contenido de la
    3. La primera :tabbable elemento en el cuadro de diálogo del buttonpane
    4. El cuadro de diálogo del botón de cierre
    5. El cuadro de diálogo propio

    Una solución es el uso de la autofocus atributo en otros campos de datepicker.

    • Me gusta el enfoque automático de la mejor opción. Simple y sigue la documentación de jquery
  9. 1

    Esto es lo que he hecho para solucionar mi problema.

    Este es el código de la creación del cuadro de diálogo.

    document.getElementById('date').disabled = true;
    setTimeout('document.getElementById("date").disabled = false;', 100);

    De esta manera, wen abre el cuadro de diálogo, se pondrá el foco en otro control.

    Puede probar el tiempo de espera para una cantidad menor de retraso, pero 100 estaba bien para mí.

  10. 0

    Sé que esto es una vieja pregunta, pero una solución que funcionó para mí era disparo fuera un icono de calendario:

    $( ".date" ).datepicker({
      showOn: "button",
      buttonImage: "../css/imgs/calendar.gif",
      buttonImageOnly: true
    });
  11. 0

    Por alguna razón el calendario dejó de tener este comportamiento cuando se me llena en la opción de animación en el inicializador:

    showAnim: Caída de

  12. 0

    De código fuente que he encontrado que jQuery.Dialog siempre pistas focusin evento en los elementos dentro de diálogo, y desencadena focus evento en que el elemento de diálogo después de las ganancias de estado activo. Para evitar este comportamiento simplemente dejar de propagación la propagación de eventos de elemento que se centra en.

    $("#input").on("focusin", function (e) {
       return false; //or e.stopPropagation();
    }).datepicker();

Dejar respuesta

Please enter your comment!
Please enter your name here