jquery-ui download - Come ridimensionare il controllo jQuery DatePicker





only jquery.ui.datepicker.css (19)


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

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?




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




apri ui.all.css

alla fine mettere

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

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

e vai !




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.




Penso di averlo trovato - ho dovuto andare nel file CSS e modificare direttamente la dimensione del font per il controllo datepicker. Ovvio, una volta che ne siete a conoscenza, ma all'inizio vi confondete.




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



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

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



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

Fiddle




Un altro approccio:

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



Inserisci

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

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




Non è necessario cambiarlo nel file jquery-ui css (può essere fonte di confusione se si cambiano i file predefiniti), è sufficiente aggiungere

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




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.




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>



Non sono sicuro che qualche organismo abbia suggerito di seguire la strada, se sì, ignora semplicemente i miei commenti. Ho provato questo oggi e funziona per me. Ridimensionando 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) 
    }
});

Usando la funzione di callback beforeShow




Stavo provando questi esempi senza successo. Apparentemente altri fogli di stile sulla pagina stavano impostando le dimensioni di carattere predefinite per tag diversi. Se si regola ui-datepicker si sta cambiando un div. Se cambi un div devi assicurarti che il contenuto di quel div erediti quella dimensione. Questo è quello che alla fine 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!




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



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



il posto migliore per cambiare la dimensione del calendario è nel file jquery-ui.css

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



Grazie Michal

Ho creato una versione per gli elenchi che può essere ordinabile o modificabile.

Molto utile per me almeno!

    function sortableEnable() {
        $( "ul" ).sortable();
        $( "ul" ).sortable( "option", "disabled", false );
        $( "li" ).attr("contentEditable","false");
        $( "li" ).css("cursor","move");
        return false;
    }

  function sortableDisable() {
        $( "ul" ).sortable("disable");
        $( "li" ).attr("contentEditable","true");
        $( "li" ).css("cursor","default");
        return false;
    }

    $(function() {
        sortableEnable();
    });




jquery-ui