jquery-ui - ejemplos - datepicker php

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

Question

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

Edit: 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 la configuración

body {font-size: 62.5%;}

para hacer 1em = 10px. Hacer esto me da un selector de fecha de buen tamaño, pero obviamente desordena 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 ignorarlo. Así que debe haber alguna forma de reducir el selector de fechas cambiando la fuente de su principal, pero ¿cómo puedo hacer eso sin desordenar el resto de mi sitio?

Answer 1

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.

Answer 2

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; }

Answer 3

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

Answer 4

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

Answer 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 ajustas el ui-datepicker estás 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 me funcionó:

<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!

Answer 6

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.

Answer 7

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

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

Answer 8

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>

Answer 9

Intenté utilizar 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 como:

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

Answer 10

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

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

Answer 11

No estoy seguro de si algún cuerpo ha sugerido la siguiente manera, si es así, simplemente ignore mis comentarios. He probado 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)
}
});

Usando la función de devolución de llamada antes de mostrar

Answer 12

No puedo agregar un comentario, así que esto se refiere a la respuesta aceptada de Keijro. De hecho, agregué lo siguiente a mi hoja de estilo en su lugar:

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

y funcionó igual de bien. Esto podría ser preferible al valor absoluto de 10px.

Answer 13

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

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

Answer 14

Otro enfoque:

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

Answer 15

Para mí, esta fue la solución más fácil: agregué el font-size:62.5%; a la primera etiqueta .ui-datepicker en el archivo css personalizado 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%; }

Answer 16

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

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

Answer 17

abrir ui.all.css

al final poner

@import "ui.base.css";
@import "ui.theme.css";
div.ui-datepicker {
font-size: 62.5%;
}

y ve !

Answer 18

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;
}

Answer 19

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

Answer 20

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

Fiddle

Answer 21

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>