ACTUALIZACIÓN

Me han vuelto a Jquery 1.3.2 y todo lo que está trabajando, no está seguro de cuál es el problema/fue como yo no he cambiado nada más aparte de la de jquery y la interfaz de usuario de la biblioteca de versiones.

ACTUALIZACIÓN FINAL

Estoy teniendo un problema con el JQuery UI datepicker. El selector de fechas se adjunta a una clase y que parte está trabajando, pero el selector de fechas no se muestra.

Aquí es el datepicker de código que estoy usando y el estilo en línea que se genera cuando hago clic en el cuadro de entrada que tiene la clase «.datepicker».

$('.datepicker').datepicker({dateFormat:'dd/mm/yy'});

display:none;
left:418px;
position:absolute;
top:296px;
z-index:1;

Si puedo cambiar el display:none a display:block el datepicker funciona bien, excepto que doesnt cerca cuando yo seleccione una fecha.

Bibliotecas Jquery en uso:

  • jQuery JavaScript Library v1.4.2
  • jQuery UI 1.8 jQuery UI Widget 1.8
  • jQuery UI Ratón 1.8 jQuery UI
  • Posición 1.8 jQuery interfaz de usuario que se pueden arrastrar 1.8
  • de interfaz de usuario jQuery Drop jQuery UI 1.8
  • Datepicker 1.8
  • parece display:none y display:block a reemplazar el show()/hide() métodos que datepicker de llamadas.. son usted seguro de que no hay una regla CSS en algún lugar que el conflicto?
  • El display:none se genera por el datepicker plugin y no hay css adjunto mi hoja de estilos.
InformationsquelleAutor scott | 2010-04-21

20 Comentarios

  1. 11

    es el archivo css en la nueva no funciona. Trate de incluir el viejo 1.7.* archivo css en la cabecera demasiado, e inténtelo de nuevo.

    También, intenta hacer una .datepicker( «show» ) a la derecha después de que la construyó?

    • Tenía el mismo problema solo que ahora, decidido a actualizar mi archivo css a la versión más reciente, y funcionó. Yo había 1.8.16 y ahora han 1.8.21. Sólo una adición a esta respuesta.
  2. 33

    Yo estaba teniendo el mismo problema, y he encontrado que en mi caso la causa fue el datepicker div, por alguna razón, es la retención de la clase .ui-helper-hidden-accessible, que tiene la siguiente CSS:

    .ui-helper-hidden-accessible {
     position: absolute !important;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px,1px,1px,1px);
    }

    Estoy usando el google CDN alojado versiones de jquery, así que no podía modificar el código o el CSS. También había intentado cambiar el z-index sin ningún éxito. La solución que funcionó para mí fue establecer la propiedad clip para el datepicker de nuevo a su valor predeterminado, automático:

    $('.date').datepicker();
    $('#ui-datepicker-div').css('clip', 'auto');

    Ya que este se dirige específicamente a la datepicker div, hay menos probabilidad de efectos secundarios no deseados en otros widgets de cambiar la ui-helper-hidden-accessible clase como un todo.

    • He intentado esto pero no funcionó para mí. Estoy usando Jquery UI 1.8.18 y Jquery 1.7.1 así que esto es muy hasta la fecha.
    • puedes dar algún ejemplo de código? Hay todo tipo de razones por las que podría no haber funcionado. Mi primera conjetura sería que estas líneas no están siendo llamado, o que los selectores no son la selección de lo que podría esperar para seleccionar.
    • A mi me funciono perfectamente. Gracias.
    • He quitado la clase en conjunto. $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible'); para el mismo efecto.
    • Muchas gracias! Su solución es la única que ha funcionado para mí. Usted está impresionante. Mantener el buen trabajo.
    • Muchas gracias!
    • Gracias! Esto funcionó para mí el uso de jQuery 1.9.1 y jQuery UI 1.10.2.

  3. 16

    Esto puede ser útil a alguien. Si has copiado y pegado los datos de su formulario (que tiene el selector de fecha de entrada de la caja, asegúrese de que usted no inadvertidamente copia de la class=»hasDatepicker»

    Esto significa que su cuadro de entrada debe tener este aspecto:

    <input id="dateChooser" name="dateChooser" type="text" value=""/>

    NO

    <input id="dateChooser" name="dateChooser" type="text" value="" class="hasDatepicker">

    Cometí un error inadvertidamente. La eliminación de la clase y permitir que la interfaz de usuario jQuery llamada apareció solucionarlo.

    Espero que ayude a alguien!

    • Exactamente como esta.
    • Busco tanto tiempo para encontrar esta respuesta! Bravo…. Pensaba que estaba perdiendo mi mente.
    • A mí también. Gracias!
  4. 10

    Yo tenía el mismo problema: el Selector de Fecha fue añadido con éxito (y podría incluso encontrarse en FireBug), pero no era visible. Si utiliza FireBug para eliminar la clase «ui-helper-hidden-accessible» a partir de la Fecha del Selector de div (ID de: «ui datepicker-div»), el Selector de Fecha se hace visible y se va a trabajar de manera normal.

    Si usted agregue lo siguiente al final de su $(document).listo() la función de aplicar esto para cada Selector de Fecha en la página, y hacer que todo funcione:

    $(document).ready(function() {
          //...
          //Put all of you other page setup code here
          //...
    
          //after setting everything up (including adding all Date Pickers)
          //apply this code to every Date Picker
          $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible');  
    });

    Que era mi primera revisión. Después, he probado la solución que propuso anteriormente por Brian Mortenson y ambos funcionan a la perfección, y parecía menos invasiva que la eliminación de toda clase, desde el elemento. Así que he modificado el código para aplicar su solución para el método que he utilizado (se aplican al final de la configuración del documento, de manera que se aplica a cada Selector de Fecha y no requiere de repetición):

    $(document).ready(function() {
          //...
          //Put all of you other page setup code here
          //...
    
          //after setting everything up (including adding all Date Pickers)
          //apply this code to every Date Picker
          $('#ui-datepicker-div').css('clip', 'auto');  
    });

    Espero que esto ayude a conseguir a alguien despegar.

    EDIT: Corregido un código de error de sintaxis.

  5. 4

    Por favor, asegúrese de que está utilizando el misma versión de jquery-ui ‘js’ y ‘css’ archivos. A veces eso podría ser un problema.

  6. 4

    He tenido un problema similar con la 1.7.2 versiones de jQuery y jQuery UI. La ventana emergente no se mostraba y ninguna de las sugerencias anteriores ayudó. Lo que ayudó a que en mi caso estaba llevando a cabo la clase=»hasDatepicker», que (como el aceptado respuesta aquí notas: jQuery UI datepicker no aparecerá en la pantalla – completa el código que se incluye) es utilizado por jquery-ui para indicar que cuenta con un calendario ya ha sido añadido en el campo de texto. Deseo me encontré con que respuesta más rápido.

  7. 3

    Tuve el mismo problema con JQuery-UI 1.8.21, y JQuery-UI 1.8.22.

    Problema fue porque había dos DatePicker de secuencia de comandos, uno de ellos integrado con jquery-ui-1.8.22.custom.min.js y otro en jquery.ui.datepicker.js (una versión antigua antes de actualizar a 1.8.21).

    La eliminación de la duplicado jquery.ui.datepicker.js, resolver el problema por tanto 1.8.21 y 1.8.22.

  8. 2

    He cambiado la línea de

    .ui-helper-hidden-accessible { position: absolute !importante; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }

    a

    .ui-helper-hidden-accessible { position: absolute !importante; }

    y todo funciona ahora. De lo contrario, trate de aumentar el z-index como Soldierflup sugerido.

    • Todavía no funciona para mí. Traté de esta sugerencia, he intentado @brian sugerencia, he comprobado por la coincidencia de versiones de fuente y la configuración de la z-index. Ninguno de estos trabajado. Mi datepicker muestra sin ningún tipo de visualización de estilo como si fuera transparente excepto el texto.
    • suena como el archivo CSS que contiene el selector de fechas no se aplica, o de otras reglas que se aplican después. Se puede inspeccionar el selector de fecha en su navegador (Chrome, preferiblemente) dev tools y ver el qué reglas se aplican y de dónde? Si no están allí, compruebe que la ruta de acceso del archivo es correcta.
  9. 1

    Tratar de poner el z-index de su datepicker css mucho más altos (por ejemplo, z-index: 1000).
    El selector de fechas es probable que se muestra debajo de su contenido original.
    Yo tenía el mismo problema y esto me ayudó a salir.

  10. 1

    Tenía el mismo problema que el datepicker-DIV que ha sido creado pero no se llenan y se muestran en haga clic en.
    Mi culpa fue a dar a la entrada de la clase «hasDatepicker» staticly. jQuery-ui sombrero para establecer esta clase por su propia cuenta. entonces a mí me funciona.

  11. 0

    En caso de que usted está teniendo este problema cuando se trabaja con el panel de control de WordPress y el uso de un ThemeRoller generado tema – asegúrese de que usted está usando la Versión 1.7.3 de tema, 1.8.13 no funcionará. (Si se mira de cerca, el elemento que está siendo representado, pero .ui-helper-hidden-accessible es la causa de que no se muestre.

    Actual Versión de WP: 3.1.3

  12. 0

    Este es un problema un poco diferente. Conmigo el selector de fecha sería de pantalla, pero el css no carga.

    Me fijo por: Recargar el tema (ir a la interfaz de usuario jquery css, línea 43 y copiar la url que hay para editar su themeroller tema) > Guardar sin las opciones avanzadas > Reemplazar los archivos antiguos > Trate de no cambiar la url y ver si eso ayuda.

  13. 0
    * html .ui-helper-hidden-accessible 
    {
     position: absolute !important; 
     clip: rect(1px 1px 1px 1px); 
     clip: rect(1px,1px,1px,1px); 
    }

    Esto sólo funciona para IE, así que puedo aplicar este hack y funciona bien en FF, Safari y otros.

  14. 0

    Aceptar, finalmente encontré mi solución.

    Si usted está usando plantillas en la vista (usando Moustache.js, u otros…), hay que tener en cuenta que algunos de sus clases se pueden cargar dos veces, o se crearán más tarde. Así, debe aplicar esta función $(".datepicker" ).datepicker(); una vez que la instancia ha sido creado.

  15. 0

    Parece suceder con algunos temas (cupertino/tema.css) en mi caso.

    Y el problema es el .ui-helper-hidden-accessible clase que han de propiedad de clip, como los anteriores usuarios, dijo.

    Sólo Sobrescribir y que va a estar bien

    $(document).ready(function() {
        $("#datePicker").datepicker({ dateFormat: "yy-m-d" });
        $('#ui-datepicker-div').css('clip', 'auto');
    });
  16. 0

    Si usted está usando los scripts de metro UI css (gratuito excelente interfaz de usuario de metro conjunto de http://metroui.org.ua/) , que puede entrar en conflicto también.
    En mi caso, este fue el problema recientemente.

    Así, quitarse las secuencias de comandos de referencia de la interfaz de usuario de metro (como yo no estaba usando sus componentes), selector de fecha se está mostrando.

    Pero usted no puede conseguir metro buscar datepicker de jQuery-ui

    Pero en la mayoría de los casos, como han mencionado otros, su enfrentamiento con los duplicados de las versiones de jQuery-UI javascripts.

  17. 0

    He estado con problemas similares. Lanzaría una vez y no una 2da vez en diferentes fichas. He utilizado una clase en lugar de un identificador, y utilizar el mismo nombre de la clase en todas partes. Me parece datepicker se activa una vez y el original de la inicialización tiene que ser utilizado en todas partes. Probablemente alrededor de este código con la de destruir la api, pero para mí fue fácil, simplemente, el uso de la misma clase en todas partes.

  18. 0

    He encontrado un truco solución. Puede utilizar el siguiente códigos.

    $(".datepicker").datepicker({
    /* any options you want */
    beforeShowDay: function (date) {
        $('#ui-datepicker-div').css('clip', 'auto');
        return [true, '', ''];
        }
    });
  19. 0

    Aquí está el código completo, es el trabajo de mi lado: sólo prueba.

    <!doctype html>
    <html lang="en">
       <head>
          <title>jQuery Datepicker</title>
          <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
          <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
          <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
          <script>
             $(function() {
                $( "#datepicker1" ).datepicker();
             });
          </script>
       </head>
       <body>
          <p>Enter Date: <input type="text" id="datepicker1"></p>
       </body>
    </html>
  20. 0

    Acaba de publicar, porque la causa para que mi caso no se ha descrito su.

    En mi caso el problema era que «assets/js/fuelux/treeview/fuelux.min.js» fue la adición de un constructor .datepicker(), por lo que era primordial la assets/js/datetime/bootstrap-datepicker.js

    solo el movimiento de la

    para ser justo antes de la $(‘.selector de fecha’) resolver mi problema.

Dejar respuesta

Please enter your comment!
Please enter your name here