[jquery-ui] Come ridimensionare il controllo jQuery DatePicker



Answers

Non posso aggiungere un commento, quindi questo è in riferimento alla risposta accettata da Keijro. Ho effettivamente 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.

Question

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

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

body {font-size: 62.5%;}

per rendere 1em = 10px. Fare questo mi dà un datapicker di buone dimensioni, ma ovviamente incasina il resto del mio sito (attualmente ho font-size: .9em).

Ho provato a lanciare un DIV attorno alla mia casella di testo e ad impostarne la dimensione, 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?




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

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



Un altro approccio:

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



Cambio la riga seguente in 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; }



Per me, questa è stata la soluzione più semplice: ho aggiunto la font-size:62.5%; del font-size:62.5%; al primo tag .ui-datepicker 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%; }



La soluzione di Jacob Tsui funziona perfettamente per me:

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



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.




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>



Ho provato l'approccio di utilizzare la funzione di callback beforeShow ma ho trovato 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})}



apri ui.all.css

alla fine mettere

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

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

e vai !




Links



Tags

jquery-ui