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

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

Editar: encontré 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 principal. Recomiendan configurar

body {font-size: 62.5%;}

hacer 1em = 10px. Hacer esto me da un selector de fechas de buen tamaño, pero obviamente arruina el resto de mi sitio (actualmente tengo el tamaño de fuente: .9em).

Intenté lanzar un DIV alrededor de mi cuadro de texto y establecer su tamaño de fuente, pero parece ignorar eso. Entonces, debe haber alguna forma de reducir el selector de fechas cambiando la fuente de su padre, pero ¿cómo puedo hacer eso sin desordenar el resto de mi sitio?

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

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

en una hoja de estilo cargada después de los archivos ui

se necesita div.ui-datepicker en caso de que ui-widget se mencione después de ui-datepicker en la declaración

No puedo agregar un comentario, por lo que esto se refiere a la respuesta aceptada por Keijro. En realidad, agregué lo siguiente a mi hoja de estilo:

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

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

No estoy seguro si algún cuerpo ha sugerido la siguiente manera, en caso afirmativo, simplemente ignore mis comentarios. Probé esto hoy y funciona para mí. Simplemente cambiando 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) 
    }
});

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

Cambio la siguiente línea en ui.theme.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; }

Añadir

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

en una hoja de estilo cargada después de los archivos ui. Esto también cambiará el tamaño de los elementos de fecha.

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

antes de:

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

después:

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

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!

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 a las mil maravillas.

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

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>

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>

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

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}

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 */
}

Este código funcionará en los botones del calendario. el tamaño de los números aumentará al usar "altura de línea".

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>

puede cambiar jquery-ui-1.10.4.custom.css de la siguiente manera

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}

Otro enfoque:

$('.your-container').datepicker({
    beforeShow: function(input, datepickerInstance) {
        datepickerInstance.dpDiv.css('font-size', '11px');
    }
});

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

Violín

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

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

Podemos modificar el archivo predeterminado ' jquery-ui.css ' como se muestra a continuación:

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

Sin embargo, cambiar el valor predeterminado ' jquery-ui.css no se recomienda archivo ', ya que podría haberse utilizado en otro lugar del proyecto. Cambiar los valores en el archivo predeterminado puede alterar la fuente del selector de fecha en otras páginas web donde se ha utilizado.

Usé el siguiente código para alterar el "tamaño de fuente". Lo coloqué justo después de llamar a datepicker () como se muestra a continuación.

<script>
        $(function () {
            $( "#datepicker" ).datepicker();
            $("div.ui-datepicker").css("font-size", "80%")
        });
</script>

Espero que esto ayude...

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

abrir ui.all.css

al final poner

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

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

y ve !

Para que esto funcione en Safari 5.1 con Rails 3.1, tuve que agregar:

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

Tenía un selector de fecha que aparecía en modo modal y debido al "contenedor de visualización de fecha" en el lado izquierdo, el calendario estaba parcialmente fuera de la vista, así que agregué:

.datepicker-date-display {
  display: none;
}

.datepicker-calendar-container {
  max-height: 21em;
}
.datepicker-day-button {
  line-height: 1.2em;
}

.datepicker-table > thead > tr > th {
  padding: 0;
}