ejemplos - Jquery UI Datepicker no muestra
tooltip jquery ejemplos (19)
Aquí está el código completo, está funcionando desde mi lado: simplemente 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>
ACTUALIZAR
He retrocedido a Jquery 1.3.2 y todo está funcionando, no estoy seguro de cuál es el problema / was ya que no he cambiado nada más aparte de las versiones de la biblioteca jquery y ui.
ACTUALIZAR FIN
Tengo un problema con JQuery UI datepicker . El marcador de fecha se adjunta a una clase y esa parte está funcionando, pero el marcador de fecha no se muestra.
Aquí está el código de datepicker que estoy usando y el estilo en línea que se está generando 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 cambio la pantalla: none to display: block the datepicker funciona bien, excepto que no se cierra cuando selecciono una fecha.
Bibliotecas Jquery en uso:
- jQuery JavaScript Library v1.4.2
- jQuery UI 1.8 jQuery UI Widget 1.8
- jQuery UI Mouse 1.8 jQuery UI
- Posición 1.8 jQuery UI Draggable 1.8
- jQuery UI Droppable 1.8 jQuery UI
- Datepicker 1.8
Asegúrese de estar utilizando la misma versión de los archivos jquery-ui ''js'' y ''css''. A veces eso podría ser un problema.
Cambié la línea
.ui-helper-hidden-accessible {position: absolute! important; clip: rect (1px 1px 1px 1px); clip: rect (1px, 1px, 1px, 1px); }
a
.ui-helper-hidden-accessible {position: absolute! important; }
y todo funciona ahora De lo contrario, intente subir el índice z como lo sugirió Soldierflup.
En caso de que tenga este problema al trabajar con el panel de control de WordPress y usar un tema generado por ThemeRoller, asegúrese de estar usando 1.7.3 Versión del tema, 1.8.13 no funcionará. (Si observa detenidamente, el elemento se representa, pero .ui-helper-hidden-accessible hace que no se muestre.
Versión actual de WP: 3.1.3
Estaba teniendo el mismo problema, y encontré que en mi caso la causa era que el div datepicker por algún motivo conservaba la clase .ui-helper-hidden-accessible, que tiene el siguiente CSS:
.ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
Estoy usando las versiones alojadas de Google CDN de jquery, así que no pude modificar el código o el CSS. También intenté cambiar el índice z sin éxito. La solución que funcionó para mí fue establecer la propiedad del clip para el selector de fechas de nuevo a su valor predeterminado, auto:
$(''.date'').datepicker();
$(''#ui-datepicker-div'').css(''clip'', ''auto'');
Dado que esto se dirige específicamente al div datepicker, hay menos posibilidades de efectos secundarios no deseados en otros widgets que el cambio de la clase ui-helper-hidden-accessible como un todo.
Este es un problema levemente diferente. Conmigo mostraría el selector de fecha, pero el CSS no se estaba cargando.
Lo arreglé de la siguiente manera: Recargué el tema (vaya a jquery ui css, línea 43 y copie la url allí para editar su tema themeroller)> Resave sin las opciones avanzadas> Reemplazar archivos antiguos> Trate de no cambiar las URL y vea si eso ayuda también.
Esto puede ser útil para alguien. Si copió y pegó los datos de su formulario (que tiene el cuadro de entrada del selector de fecha, asegúrese de no copiar inadvertidamente la clase = "hasDatepicker")
Esto significa que su cuadro de entrada debería verse así:
<input id="dateChooser" name="dateChooser" type="text" value=""/>
NO
<input id="dateChooser" name="dateChooser" type="text" value="" class="hasDatepicker">
Cometí ese error inadvertidamente. Al eliminar la clase y permitir que la llamada a jQuery UI pareciera solucionarlo.
Espero que ayude a alguien!
He encontrado una solución truco. Puedes usar los códigos a continuación.
$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
$(''#ui-datepicker-div'').css(''clip'', ''auto'');
return [true, '''', ''''];
}
});
He tenido problemas similares. Se lanzaría una vez y no una segunda vez bajo diferentes pestañas. Usé una clase en lugar de una identificación, y usé el mismo nombre de clase en todas partes. Para mí, parece que datepicker se activa una vez y la inicialización original debe usarse en todas partes. Uno probablemente puede codificar esto con la API de destrucción, pero para mí fue fácil usar la misma clase en todas partes.
Ok, finalmente encontré mi solución.
Si está usando plantillas en su vista (usando Moustache.js, u otros ...), debe tener en cuenta que algunas de sus clases pueden cargarse dos veces, o se crearán más adelante. Entonces, debe aplicar esta función $(".datepicker" ).datepicker(); una vez que la instancia ha sido creada.
Parece que sucede con algunos temas (cupertino / theme.css) en mi caso.
Y el problema es la clase .ui-helper-hidden-accessible que tiene propiedad de clip, como dicen los usuarios anteriores.
Solo sobrescríbalo y estará bien
$(document).ready(function() {
$("#datePicker").datepicker({ dateFormat: "yy-m-d" });
$(''#ui-datepicker-div'').css(''clip'', ''auto'');
});
Si está utilizando los scripts de metro UI css (excelente UI de metro gratuita configurada desde http://metroui.org.ua/ ), eso también puede chocar. En mi caso, este fue el problema recientemente.
Por lo tanto, eliminé la referencia de scripts de la interfaz de usuario del metro (ya que no estaba usando sus componentes), se muestra datepicker.
Pero no puedes ver el metro buscar datepicker de jQuery-ui
Pero en la mayoría de los casos, como otros mencionaron, choca con versiones duplicadas de javascriptcripts de jQuery-UI.
Trate de poner el índice z de su datapicker css mucho más alto (por ejemplo, z-index: 1000). El datepicker probablemente se muestre debajo de su contenido original. Tuve el mismo problema y esto me ayudó.
Tuve el mismo problema al usar JQuery-UI 1.8.21 y JQuery-UI 1.8.22.
El problema se debía a que tenía dos secuencias de comandos DatePicker, una incorporada con jquery-ui-1.8.22.custom.min.js y otra en jquery.ui.datepicker.js (una versión anterior antes de actualizar a la versión 1.8.21).
Eliminando el duplicado jquery.ui.datepicker.js , resuelva el problema para 1.8.21 y 1.8.22.
Tuve el mismo problema: el selector de fecha se agregó con éxito (e incluso se puede encontrar en FireBug), pero no estaba visible. Si usa FireBug para eliminar la clase "ui-helper-hidden-accessible" del separador de fecha div (ID de: "ui-datepicker-div"), el Selector de fecha se hará visible y funcionará de forma normal.
Si agrega lo siguiente al final de su función $ (documento) .ready (), aplicará esto a cada selector de fecha en su página y hará que todos funcionen:
$(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'');
});
Esa fue mi solución inicial. Después, probé la solución sugerida anteriormente por Brian Mortenson y funcionó a la perfección, y parecía menos invasiva que eliminar una clase completa del elemento. Así que modifiqué mi código para aplicar su solución al método que utilicé (se aplica al final de la configuración del documento para que se aplique a cada selector de fecha y no requiera 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 que alguien se despegue.
EDITAR: corrigió un error de sintaxis de código.
Tuve un problema similar con las versiones 1.7.2 de jQuery y jQuery UI. La ventana emergente no aparecía y ninguna de las sugerencias aplicables anteriores ayudaba. Lo que ayudó en mi caso fue sacar la clase = "hasDatepicker" que (como la respuesta aceptada aquí señala: jQuery UI datepicker no se mostrará - código completo incluido ) es usado por jquery-ui para indicar que un datepicker ya ha sido agregado a el campo de texto. Desearía haber encontrado esa respuesta antes.
Tuvo el mismo problema que el datepicker-DIV ha sido creado pero no se llenó y aparece al hacer clic. Mi error fue dar la entrada de la clase "hasDatepicker" de forma estática. jQuery-ui hat para establecer esta clase por sí mismo. entonces funciona para mi
es el archivo css en el nuevo no funciona. Intenta incluir también el archivo antiguo 1.7. * Css en tu encabezado, y vuelve a intentarlo.
Además, ¿trataste de hacer un .datepicker ("mostrar") justo después de que se construyó?
* html .ui-helper-hidden-accessible
{
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
Esto solo funciona para IE, así que aplico este truco y funciona bien en FF, Safari y otros.