Cómo cambiar el tamaño del control de DatePicker de jQuery

Estoy usando el control DatePicker de jQuery por primera vez. Lo tengo trabajando en mi formulario, pero es aproximadamente el doble de grande de lo que me gustaría, y aproximadamente 1.5 veces más grande que la demo en la página de interfaz de usuario de jQuery. ¿Hay alguna configuración simple que me falta para controlar el tamaño?

Edit: he encontrado una pista, pero abre nuevos problemas. En el archivo CSS, indica que el componente se escalará de acuerdo con el tamaño de fuente del elemento padre. Recomiendan establecer 

body {font-size: 62.5%;}

Para hacer 1em = 10px. Hacer esto me da un datepicker de buen tamaño, pero obviamente arruina el resto de mi sitio (actualmente tengo font-size: .9em).

Traté de lanzar un DIV alrededor de mi cuadro de texto y establecer su tamaño de fuente, pero parece ignorar eso. Así que debe haber alguna manera de reducir el datepicker cambiando la fuente de su padre, pero ¿cómo lo hago sin estropear el resto de mi sitio?

 188
jquery-ui
Author: gfrizzle, 2009-03-18
Source

21 answers

No tiene que cambiarlo en el archivo css jquery-ui (puede ser confuso si cambia los archivos predeterminados), es suficiente si agrega 

div.ui-datepicker{
 font-size:10px;
}

En una hoja de estilos cargada después de los archivos de interfaz de usuario

Div.ui-datepicker es necesario en caso de que ui-widget se mencione después de ui-datepicker en la declaración

 379
Author: Jimmy Stenke,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-03-18 21:54:31

No puedo agregar un comentario, así que esto es en referencia a la respuesta aceptada por Keijro. En realidad agregué lo siguiente a mi hoja de estilo en su lugar:

    div.ui-datepicker {
    font-size: 62.5%;
}

Y funcionó también. Esto podría ser preferible al valor absoluto de 10px.

 29
Author: Bryant Bowman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-08 12:01:46

No estoy seguro de si algún órgano ha sugerido seguir el camino, en caso afirmativo, simplemente ignore mis comentarios. He probado esto hoy y funciona para mí. Con solo cambiar el tamaño de la fuente antes de que se muestre el control: 

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){    
           $(".ui-datepicker").css('font-size', 12) 
    }
});

Usando la función de devolución de llamada beforeShow

 20
Author: Jacob CUI,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-22 01:32:30

Cambio la siguiente línea en la interfaz de usuario.temático.css: 

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

A: 

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }
 9
Author: Pavel Chuchuva,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-03-18 21:48:25

Añadir 

div.ui-datepicker, .ui-datepicker td{
 font-size:10px;
}

En una hoja de estilos cargada después de los archivos ui. Esto también redimensionará los elementos de fecha.

 5
Author: Satyaram B V,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-20 20:35:25

Para mí, esta fue la solución más fácil: Agregué font-size:62.5%; a la primera etiqueta .ui-datepicker en el archivo css personalizado de jquery:

Antes: 

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;}

Después de: 

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }
 5
Author: Robert K.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-11 17:23:20

Estaba probando estos ejemplos sin éxito. Aparentemente, otras hojas de estilo en la página estaban configurando tamaños de fuente predeterminados para diferentes etiquetas. Si ajusta el ui-datepicker está cambiando un div. Si cambia un div, debe asegurarse de que el contenido de ese div herede ese tamaño. Esto es lo que finalmente funcionó para mí:

<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

¡Buena suerte!

 4
Author: Chad Kuehn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-19 20:42:49

Estaba usando una entrada para recopilar y mostrar el calendario, y para poder cambiar el tamaño del calendario he estado usando este código: 

div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}

Funciona como un encanto.

 2
Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-06 05:19:58

$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');

 2
Author: Stefan Wendelmann,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-24 08:36:46

Esto funcionó para mí y parece simple...

$(function() {
  $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
 1
Author: jimscafe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-15 14:05:51 
with out changing the css file you can also change the calendar size  by putting the the following code in to ur <head>.....</head> tag:


<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
</style>

<script>



$(function() {

$( "#datepicker" ).datepicker({
//font-size:10px;
 //numberOfMonths: 3,

showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
});
});
</script>

</head>
 1
Author: babbu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-17 06:50:12

Probé el enfoque de usar la función de devolución de llamada beforeShow, pero descubrí que también tenía que establecer la altura de la línea. Mi versión parecía:

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
 1
Author: PedroKTFC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-03 23:32:30

El mejor lugar para cambiar el tamaño del calendario es en el archivo jquery-ui.css

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}
 1
Author: John Belalcazar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-24 19:59:22

Este código funcionará en los botones del Calendario. el tamaño de los números aumentará usando "line-height".

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>
 1
Author: Irshad Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-07 08:41:06

Puede cambiar jquery-ui-1.10.4.personalizar.css como sigue

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}
 1
Author: Anshu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-12 11:14:23

Otro enfoque: 

$('.your-container').datepicker({
    beforeShow: function(input, datepickerInstance) {
        datepickerInstance.dpDiv.css('font-size', '11px');
    }
});
 1
Author: mromagnoli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-02 19:04:28

$('div.ui-datepicker').css({ fontSize: '12px' }); trabajo si lo llamamos después $("#DueDate").datepicker();

Fiddle

 1
Author: Mostafa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-20 14:15:43

La solución de Jacob Tsui funciona perfecto para mí: 

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){ 
        $(".ui-datepicker").css('font-size', 12)
    }
});
 1
Author: Gabriel Molina,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-11 22:56:31

Creo que lo encontré - tuve que entrar en el archivo CSS y cambiar el tamaño de fuente para el control datepicker directamente. Obvio una vez que lo sabes, pero confuso al principio.

 0
Author: gfrizzle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-03-18 19:46:07

Abra la interfaz de usuario.todo.css

Al final poner

@import "ui.base.css";
@import "ui.theme.css";

div.ui-datepicker {
font-size: 62.5%; 
}

¡Y vamos !

 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-09-23 19:34:53

Para que esto funcione en Safari 5.1 con Rails 3.1, tuve que añadir: 

.ui-datepicker, .ui-datepicker a{
 font-size:10px;
}
 0
Author: Clay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-25 16:43:30