Así que aquí está el programa de instalación:
Tengo dos jquery datepickers, dentro de un jquery ficha, dentro de un jquery ventana de diálogo modal:

\---/\---/\---/_______________
/                            /
\                            \
/  DATEPICKER1               /
\                            \
/  DATEPICKER2               /
\                            \
/                            /
\                            \
/____________________________/

La primera datepicker funciona normalmente, pero cuando intento hacer clic en una fecha en la segunda datepicker simplemente activa la primera. ¿Se sigue que? 🙂

Así que para resumir, hacer clic en una fecha en datepicker2 activa datepicker1.

No tengo idea de por qué está pasando esto – tienen diferentes ids y nombres, como se describe a continuación.

Para crear el datepickers estoy usando:

$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
});

Los campos son simplemente:

<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />

Estoy usando jQuery v1.9.0 y jQueryui v1.10.0.

Alguna idea sobre esto? Como una advertencia, soy incapaz de publicar código real debido a las restricciones de mi empleador, pero puedo responder más preguntas si usted necesita cualquier aclaración. Cualquier ayuda sería muy apreciada!!

  • +1 para el arte ASCII.
  • se puede eliminar $("#datepicker2").datepicker(); y ver lo que está sucediendo, si datepicker2 activar datepicker
  • compruebe si su están trabajando en la escritura de copia de los códigos…. esto no debería suceder..:)
  • Estoy de acuerdo, yo he usado jquery muchas veces en muchos sitios y NUNCA se encontró con un problema como este. Tristemente he comprobado para asegurarse de que estoy usando el derecho de archivos, código de la derecha, etc.
  • Debería funcionar igual de bien: jsfiddle.net/DpmeB
  • no hay ninguna «onclick» eventos asignados a la caja de texto, pero hice lo que usted solicitó. Cuando usted haga clic en datepicker2 (sin tener cuenta con un calendario asignado) no se activa el primer selector de fecha.
  • como una nota al margen de la actualización de jquery 1.9.1 como tehre son montón de correcciones de errores
  • $(function() { $("#datepicker1, #datepicker2").datepicker(); }); me funciona en un violín
  • ok, si selecciona una fecha en el datepicker de donde es la aplicada en 1/2? también está familiarizado con javascript puntos de interrupción y la depuración de usarlo
  • como la depuración de paso, os sugiero agregar un beforeShow controlador y añadir punto de interrupción dentro de ella para ver lo que está sucediendo y empezar de nuevo trazado desde allí
  • buena idea, me había olvidado de la beforeShow controlador. Te voy a dar que un tiro y ver qué puedo averiguar.
  • como se puede ver aquí jsfiddle.net/fMD62/5 no debe ser un problema con jquery UI sí, usted probablemente tiene algo eso es jugar con el código.
  • Lo que hace que la consola de JavaScript decir? btw. realmente debería usar un nombre de clase como selector no el id. También puede utilizar el type="date" como se define en HTML5.
  • ¿por qué debo utilizar un nombre de clase en lugar de la identificación? No estoy discutiendo, solo por curiosidad. Además, la consola no era útil en este caso, como no hay errores fueron lanzados. He intentado depurar el código en sí, pero que no ve ningún problema durante la ejecución. Finalmente encontré la resolución que he publicado anteriormente.
  • Bien un Identificador es el mejor identificador, pero no quiere declarar un solo objeto a ser un selector de fecha, sino a una variedad de elementos. Por eso tenemos la clasificación en HTML. HTML5 realmente lleva al siguiente nivel de la introducción de tipos como ‘fecha’ y ‘datetime’. Usted puede simplemente utilizar el tipo y anular y sólo añadir jquery comportamiento si el navegador no ya de implementar sus propias. Que es especialmente útil en las computadoras de mano.
  • Entiendo exactamente lo que usted está diciendo, y eso es un punto muy bueno, especialmente cuando se utilizan múltiples datepickers en la misma página. Lamentablemente en este caso no puedo confiar en HTML5 (esto es para un proyecto interno, y muchos usuarios estarán viendo el sitio en el estremecimiento de IE8). Tu comentario acerca de id vs clase es bueno, sin embargo, y voy a recordar que, en el futuro. Muchas gracias!!! 🙂

InformationsquelleAutor musicmunky | 2013-04-23

10 Comentarios

  1. 9

    ACTUALIZACIÓN:
    Parece que el comportamiento se describe a continuación fue abordado en otra pregunta de stackoverflow aquí:

    Evitar jQuery interfaz de usuario cuadro de diálogo de ajuste de foco al primer cuadro de texto

    Disculpas por el «duplicado» pregunta – si yo hubiera sabido que esto era el problema me hubiera imaginado rápidamente!!!

    ################################################################################

    Bien, la solución es muy simple, y tal vez alguien me puede ilustrar por qué funciona de esta manera porque estoy un poco despistado en el momento.

    Esto es lo que hice:

    He añadido otros dos campos de entrada de texto al formulario (que eran necesarios) y reordenar el diseño, de modo que uno de esos nuevos campos de entrada fue el «primer» elemento » (en la esquina superior izquierda), así:

    \---/\---/\---/_______________
    /                            /
    \                            \
    /  TEXTFIELD1   DATEPICKER1  /
    \                            \
    /  TEXTFIELD2   DATEPICKER2  /
    \                            \
    /                            /
    \                            \
    /____________________________/

    De repente el problema ha desaparecido! Sin embargo, observo un comportamiento interesante:

    Cuando seleccione una fecha en datepicker, el cursor a continuación, inmediatamente salta de nuevo al primer campo de texto.
    Así que si esto estuviera sucediendo cuando tuve la datepickers sin campos de texto, que el comportamiento significaría que el cursor inmediatamente se han saltado de nuevo a la primera datepicker que podría haber causado el problema que estaba teniendo.

    Ahora, en cuanto a por QUÉ funciona de esta manera no tengo idea. Traté de configuración de la tabindex de los parámetros para los distintos campos de texto/datepickers pero eso no cambia el comportamiento.

    De todos modos, agradezco el aporte de todos los que intervino este era un problema raro, pero nunca me voy a olvidar cómo solucionarlo ahora. Gracias a todos por su ayuda!!

    • Gracias por el seguimiento de la solución y compartir, me estoy enfrentando el mismo problema. A pesar de la incredulidad me puede verificar que esto se produzca con jQuery 1.9.1 y jquery-ui 1.10.0. Yo creo que el principal detalle en la reproducción de la cuestión es tener dos datepickers en un cuadro de diálogo modal en mi caso)
    • Tu enlace me ayudó. Gracias. Trató de conectar datepickers en 2 campos, pero fieldA había un «enfoque automático» en él. El selector de fechas en fieldA no se mostrará si no he hecho clic en otro campo. Después de la eliminación de la «enfoque automático», el selector de fecha en cada campo funciona correctamente.
  2. 4

    Probar este amigo:
    en su JS

    JS:

     $(function() {   
           $( "#from" ).datepicker({   
          defaultDate: "+1w",  
          changeMonth: true,   
          numberOfMonths: 1,  
          onClose: function( selectedDate ) {  
            $( "#to" ).datepicker( "option", "minDate", selectedDate );  
          }  
        });  
        $( "#to" ).datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1,
          onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
          }
        });  
      });  
      

    CSS:

    	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>

    HTML:

     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    Start date: <input type="text" id="from" name="from"> 
    End date: <input type="text" id="to" name = "to">

    En su entrada

    Fecha de inicio: input type=»text» id=»de» nombre=»de»

    Fecha de finalización: input type=»text» id=»a» nombre = «a»

    Esto funcionó para mí 🙂

    por MacElie M.

  3. 3

    Creo que tiene otro código que interfieren con javascript
    este : http://jsfiddle.net/fMD62/

    funciona a la perfección (con jquery 1.9.1 y jqueryui 1.9.2

    tal vez intente

    $(function() {
        $("#datepicker1,#datepicker2").datepicker();
    });
    • Gracias por la respuesta, lamentablemente no funcionó. Sin embargo, estoy de acuerdo en que debe haber ALGO que está interfiriendo con el jquery. Todavía estoy a la caza a través del código tratando de encontrar ese conflicto.
  4. 1

    Esto es un total de un disparo en la oscuridad, pero ¿has probado de iniciar cada uno por separado? Algo como la siguiente

    $(function() {
        $('.datepicker').each(function(){
            $(this).datepicker();
        });
    });

    Es probablemente lo que los otros han mencionado y que están encontrando algún tipo de interferencia con el código, pero vale la pena una foto rápida.

    • Esto no será tan larga como la de los Identificadores son los mismos, aunque en mi caso tengo los diffs IDs por lo que trabajó para mí. gracias por este aleatoria coder que tiene el mismo problema.
  5. 1

    En su ejemplo, tanto datepickers tienen diferentes id y nombre, sin embargo, el problema que usted describe es exactamente lo que va a suceder si se utiliza el mismo nombre para ambos.

    ¿Su real uso de código de identificación y nombre para datepickers?

    • Ambos campos tienen diferentes nombres/ids, e incluso he ido tan lejos como para asegurarse de que están utilizando diferentes clases CSS (sé que no debería importar, pero sólo estoy tratando de que nada puedo pensar en este momento).
  6. 1

    Caso 1:

    @antonio comentario(incluyendo jsfiddle enlace debajo de la pregunta) funciona como de

    versión jquery-1.9.1 y 1.9.2/jquery-ui.js

    Caso 2:

    OP caso de que datepicker1 funciona bien, pero la elección de datepicker2 se abrirá datepicker1

    versión: jQuery v1.9.0 y jQueryui v1.10.0

    Caso 3:

    Mi caso cuando la elección de datepicker1 funciona bien, pero la elección de datepicker2 no tiene ningún efecto.

    versión: jquery-3.1.1.min.js y jQueryui v1.12.1

    Caso 3 solución:

    inicializar date1 primera $('date1').datepicker() date1 obras

    Para la fecha2, primero destruir date1, a continuación, inicializar date2

    $('date1').datepicker('destroy');
    $('date2').datepicker();

    Ahora para date1, destruir date2 e inicializar date1.

  7. 0

    Tratar de poner el contenido de la interfaz de usuario JQuery Diálogo dentro de un IFrame. Que podrían ayudar a superar algunos de sus problemas.

    \---/\---/\---/_______________
    /                            /
    \  ####IFRAME######          \
    \  #              #          \
    /  #DATEPICKER1   #          /
    \  #              #          \
    /  #DATEPICKER2   #          /
    \  #              #          \
    /  ################          /
    \                            \
    /____________________________/
    • Tiendo a evitar el uso de iframes en general, y de esta página en particular no estoy permitido el uso de ellos en todo (asuntos de seguridad).
  8. 0

    EXPLICACIÓN del problema

    Tengo el mismo problema y es muy decepcionante.
    He buscado a través de la fuente de código de jquery y encontré este:

    if ( $.ui.dialog.overlayInstances ) {
        this._on( this.document, {
            focusin: function( event ) {
                if ( !$( event.target ).closest(".ui-dialog").length ) {
                    event.preventDefault();
                    $(".ui-dialog:visible:last .ui-dialog-content")
                        .data("ui-dialog")._focusTabbable();
                }
            }
        });
    }

    Así que cuando se establece el foco en el elemento que no está dentro de la .ui-dialog, se activará _focusTabbable() función que establecer el foco a la primera entrada en el cuadro de diálogo.

    El problema es, que $.datepicker crea div en el extremo del cuerpo – por lo que es fuera de .ui-dialog

    Si hay otra entrada que _focusTabbable() le dará el enfoque de sus ok, como datepicker puede manejar eso. Pero si esta entrada tiene selector de fecha designada, se va a cerrar la anterior datepicker, abrir otra en la primera entrada y seleccione en el selector de fecha anterior no es despedido.

    Una de las posibles soluciones

    La solución está en este caso han de entrada que se llevará a centrar en primer lugar en el cuadro de diálogo y no tiene selector de fechas en ella.

    Yo simplemente utilizar este código HTML como primera entrada en el comienzo de contenido del diálogo, donde de otro modo selector de fecha de entrada, será en primer lugar:

    <span class="ui-helper-hidden-accessible"><input type="text" /></span>
  9. 0

    Acaba de escribir el prólogo, yo soy un servidor de base de datos programador así que sabe muy poco acerca de JavaScript así que miró a encontrar este post con la misma pregunta. Espigando por lo que he leído por encima y en comparación con mi código existente, he modificado mi JavaScript para que funcione y pensé en compartirlo.

    La única salvedad era que mi formularios existentes con una sola fecha de selectores ya no funcionaba así que tuve que añadir un poco a manejar esos y todos parecen estar bien ahora. En este caso, los campos de base de datos son en realidad un timestamp de Unix, para que el formulario se procesa cuando se presentó con los dos campos convertidos como sea necesario, pero para mayor claridad, yo no incluir ese código aquí.

    $(document).ready(function(){ 
           $( "#StartDate" ).datepicker({   
                                    altField: '#datepicker',
                                    altFormat: 'yy-mm-dd',
                                    dateFormat: 'D M d, yy', 
                                    firstDay: 1,
          onClose: function( selectedDate ) {  
            $( "#StartDate" ).datepicker( "option", "minDate", selectedDate );  
          }  
        });  
        $( "#EndDate" ).datepicker({
                                    altField: '#datepicker',
                                    altFormat: 'yy-mm-dd',
                                    dateFormat: 'D M d, yy', 
                                    firstDay: 1,
          onClose: function( selectedDate ) {
            $( "#EndDate" ).datepicker( "option", "maxDate", selectedDate );
          }
        }); 
            $( "#datepicker" ).datepicker({
                                    altField: '#datepicker',
                                    altFormat: 'yy-mm-dd',
                                    dateFormat: 'D M d, yy', 
                                    firstDay: 1,
          onClose: function( selectedDate ) {
            $( "#datepicker" ).datepicker( "option", "maxDate", selectedDate );
          }
        });     
      });
  10. -1

    en un archivo js:

    $("#fecha_1").datepicker({
        dateFormat: "dd/mm/yy",
        dayNames: "Domingo Lunes Martes Miercoles Jueves Viernes Sabado".split(" "),
        dayNamesMin: "Do Lu Ma Mi Ju Vi Sa".split(" "),
        dayNamesShort: "Do Lu Ma Mi Ju Vi Sa".split(" "),
        monthNames: "Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre".split(" "),
        monthNamesShort: "Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic".split(" "),
        prevText: "Ant",
        nextText: "Sig",
        currentText: "Hoy",
        changeMonth: !0,
        changeYear: !0,
        showAnim: "slideDown",
        yearRange: "1900:2100"
    });
    
    $("#fecha_2").datepicker({
        dateFormat: "dd/mm/yy",
        dayNames: "Domingo Lunes Martes Miercoles Jueves Viernes Sabado".split(" "),
        dayNamesMin: "Do Lu Ma Mi Ju Vi Sa".split(" "),
        dayNamesShort: "Do Lu Ma Mi Ju Vi Sa".split(" "),
        monthNames: "Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre".split(" "),
        monthNamesShort: "Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic".split(" "),
        prevText: "Ant",
        nextText: "Sig",
        currentText: "Hoy",
        changeMonth: !0,
        changeYear: !0,
        showAnim: "slideDown",
        yearRange: "1900:2100"
    }); 

    en ur página: <input type="text" id="fecha_1"><input type="text" id="fecha_2">

    • Sí, esta es la forma en que actualmente se encuentra la instalación. Yo sé acerca de todos los diferentes parámetros que se pueden configurar para cada uno de datepicker – esa no es mi pregunta.

Dejar respuesta

Please enter your comment!
Please enter your name here