2011-08-22 5 views
5

he utilizado jQuery para hacer un selector de fechas de este modo:jQuery datepicker: ¿por qué no se muestra el estilo de tema?

<input type="text" id="my_datepicker"> 

y

$('#my_datepicker').datepicker(); 

El selector de fechas está trabajando muy bien y me han utilizado esto varias veces antes. El problema es que el elemento de entrada todavía se ve como un campo de texto normal, mientras que cuando lo usé en el pasado, ha usado las clases de la interfaz de usuario de jQuery para darle un estilo al campo para que se vea brillante y acorde con el tema.

he utilizado Firebug para ver qué clesses se han aplicado al elemento de entrada, y que sólo tiene:

hasDatepicker 

mientras que un campo de entrada de un selector de fechas en otro sitio que está diseñada correctamente tiene todas las siguientes clases:

hasDatepicker 
ui-inputfield 
ui-widget 
ui-state-default 
ui-corner-all 

he mirado en los documentos datepicker, pero no pueden ver una opción que le permite inhabilitar dentro o fuera de este estilo y yo habría pensado que esto sucede por defecto de todos modos.

¿Alguien me puede mostrar lo que debo hacer para habilitar esto?

Muchas gracias.

actualización:

<input id="dob" type="text" maxlength="45" size="45" /> 

Este es el marcado de entrada desde el sitio en vivo a lo solicitado.

+1

asegurarse de que ha incluido css su página –

+1

Bien , siempre puedes [agregar esas clases tú mismo] (http://jsfiddle.net/gothick/WHeEy/).¿Podemos ver la fuente de la 'entrada' en el sitio de trabajo, por favor? –

+0

@Matt Hola. He hecho una edición en mi publicación para mostrar la 'entrada' real del sitio en vivo. – Joe

Respuesta

13

¿Estás vinculando en la hoja de estilo del tema?

Ejemplo:

<link rel="stylesheet" type="text/css" media="all" 
     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" /> 
+0

¿Había usado accidentalmente media = "screen", lo que impidió que se aplicara el estilo? ¡EXTRAÑO! Cambiar a media = "all" aplica el estilo como se esperaba. ¡Gracias! – James

1

Me parece que el sitio que usted señala es aplicar los estilos CSS para el campo de entrada, aparte de la biblioteca jquery-ui, quiero decir, en una hoja de estilo que no lo hacen pertenece a jquery-ui.

En este jsfiddle http://jsfiddle.net/diosney/PkEar/3/ puede ver que estas clases no son aplicadas por jquery-ui datepicker() en sí (estoy usando jquery 1.6.2 y jquery-ui 1.8.14).

0

Encontré que el problema provenía de cómo mi aplicación estaba agrupando los archivos css. Agregué enlaces en mi página de índice y logré que los temas funcionen.

<link href="~/Content/jquery-ui.css" rel="stylesheet" /> 
<link href="~/Content/jquery-ui.structure.css" rel="stylesheet" /> 
0

vamos a tratar con debajo de para admin: -

function eds_admin_styles() { 
     wp_enqueue_style('jquery-ui-datepicker-style' , '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css'); 
    } 
    add_action('admin_print_styles', 'eds_admin_styles'); 
    function eds_admin_scripts() { 
     wp_enqueue_script('jquery-ui-datepicker'); 
    } 
    add_action('admin_enqueue_scripts', 'eds_admin_scripts'); 

Para el tema:

function edsbootstrap_scripts() { 
     wp_enqueue_style('jquery-ui-datepicker-style' , '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css'); 
     wp_enqueue_script('jquery-ui-datepicker'); 
    } 
    add_action('wp_enqueue_scripts', 'edsbootstrap_scripts'); 

aquí se js

(function($) { 
     $('#jquery-datepicker').datepicker(); 
    }(jQuery)); 
Cuestiones relacionadas