Come ridimensionare il controllo jQuery DatePicker

Sto usando il controllo jQuery DatePicker per la prima volta. Ho funzionato sul mio modulo, ma è circa il doppio di quello che vorrei e circa 1,5 volte più grande della demo sulla pagina dell'interfaccia utente di jQuery. C'è qualche semplice impostazione che mi manca per controllare le dimensioni?

Modifica: ho trovato un indizio, ma apre nuovi problemi. Nel file CSS, indica che il componente verrà ridimensionato in base alla dimensione del carattere dell'elemento padre. Raccomandano l'impostazione

body {font-size: 62.5%;}

per fare 1em = 10px. In questo modo mi dà un datepicker di buone dimensioni, ma ovviamente rovina il resto del mio sito (al momento ho la dimensione del carattere: .9em).

Ho provato a lanciare un DIV intorno alla mia casella di testo e impostarne la dimensione del carattere, ma sembra ignorarlo. Quindi ci deve essere un modo per ridurre il datepicker cambiando il carattere del suo genitore, ma come posso farlo senza rovinare il resto del mio sito?

Non è necessario modificarlo nel file CSS jquery-ui (può essere fonte di confusione se si modificano i file predefiniti), è sufficiente se si aggiunge

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

in un foglio di stile caricato dopo i file-ui

div.ui-datepicker è necessario nel caso in cui ui-widget sia menzionato dopo ui-datepicker nella dichiarazione

Non posso aggiungere un commento, quindi questo è in riferimento alla risposta accettata da Keijro. In realtà ho aggiunto quanto segue al mio foglio di stile:

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

e ha funzionato pure. Questo potrebbe essere preferibile al valore assoluto di 10px.

Non sono sicuro se qualche organismo abbia suggerito di seguire la procedura, se sì, ignora i miei commenti. Ho provato questo oggi e funziona per me. Ridimensionando semplicemente il carattere prima che venga visualizzato il controllo:

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

Utilizzo della funzione di richiamata prima di Show

Cambio la seguente riga in ui.theme.css:

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

per:

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

Inserisci

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

in un foglio di stile caricato dopo i file-ui. Questo ridimensionerà anche gli elementi della data.

Per me, questa è stata la soluzione più semplice: ho aggiunto font-size:62.5%;il primo .ui-datepickertag nel file CSS personalizzato jquery:

prima:

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

dopo:

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

Stavo provando questi esempi senza successo. Apparentemente altri fogli di stile sulla pagina stavano impostando dimensioni di carattere predefinite per tag diversi. Se regoli ui-datepicker stai cambiando un div. Se modifichi un div devi assicurarti che il contenuto di quel div erediti quella dimensione. Questo è ciò che finalmente ha funzionato per me:

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

In bocca al lupo!

Stavo usando un input per raccogliere e mostrare il calendario e per poter ridimensionare il calendario ho usato questo codice:

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

Esso funziona magicamente.

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

Questo ha funzionato per me e sembra semplice ...

$(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>

Ho provato l'approccio dell'utilizzo della funzione di callback prima di Show ma ho scoperto che dovevo anche impostare l'altezza della linea. La mia versione sembrava:

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

il posto migliore per modificare le dimensioni del calendario è nel file jquery-ui.css

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}

Questo codice funzionerà sui pulsanti Calendario. la dimensione dei numeri aumenterà usando "line-height".

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

puoi cambiare jquery-ui-1.10.4.custom.css come segue

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

Un altro approccio:

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

$('div.ui-datepicker').css({ fontSize: '12px' }); funziona se lo chiamiamo dopo $("#DueDate").datepicker();

Violino

La soluzione Jacob Tsui funziona perfettamente per me:

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

Possiamo modificare il file predefinito " jquery-ui.css " come indicato di seguito:

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

Tuttavia, modificando l'impostazione predefinita ' jquery-ui.css non è consigliabile " in quanto potrebbe essere stato utilizzato da qualche altra parte nel progetto. La modifica dei valori nel file predefinito può alterare il carattere di datepicker in altre pagine Web in cui è stato utilizzato.

Ho usato il codice qui sotto per modificare "font-size". L'ho inserito subito dopo che datepicker () è stato chiamato come mostrato di seguito.

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

Spero che questo ti aiuti...

Penso di averlo trovato - ho dovuto andare nel file CSS e modificare direttamente la dimensione del carattere per il controllo datepicker. Ovvio una volta che lo sai, ma inizialmente confuso.

apri ui.all.css

alla fine metti

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

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

e vai !

Per farlo funzionare in Safari 5.1 con Rails 3.1, ho dovuto aggiungere:

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

Avevo un datepicker che compariva in modale e, a causa del "contenitore di visualizzazione della data" sul lato sinistro, il calendario era parzialmente fuori vista, quindi ho aggiunto:

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