Spiegazione veloce
- Ottenere il pacchetto di jQuery UI
- Una volta decompresso il pacchetto, copiare nel proprio progetto web le cartelle css e js
- Copiare i file di traduzione desiderati dalla cartella development-bundle/ui/i18n nella cartella js
- Referenziare nella propria pagina web
- il foglio di stile del tema "css/<nome_tema>/jquery-ui-1.8.12.custom.css"
<link rel="stylesheet" type="text/css" href="css/<nome_tema>/jquery-ui-1.8.12.custom.css"></link>
- gli script di jQuery, jQuery UI e i file di traduzione
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-i18n.js"></script>
- il foglio di stile del tema "css/<nome_tema>/jquery-ui-1.8.12.custom.css"
- Creare un elemento input di tipo text e assegnargli una classe o un id
<input type="text" class="datepicker" />
- Inserire il codice che inizializza il calendario
<script type="text/javascript">
$(function(){
$.datepicker.setDefaults( $.datepicker.regional[ "it" ] );
$('.datepicker').datepicker();
});
</script>
Ottimizzazioni
Se il testo nel calendario è troppo grande, probabilmente non è stato definito il font-size nel proprio css. È possibile rimpicciolirlo correggendo il font-size nella classe CSS ui-datepicker, ad esempio aggiungendo questo frammento subito dopo il tag link del punto 4
<style type="text/css">
.ui-datepicker{ font-size: 80%; }
</style>
I file di traduzione
All'interno della cartella development-bundle/ui/i18n sono presenti tutti i file javascript che contengono le traduzioni e i formati per ogni lingua. Tramite il tag <script> è possibile includere solamente i file delle lingue che si desiderano, oppure con un unico file, il jquery-ui-i18n.js è possibile utilizzarle tutte.
jQuery automaticamente non riesce a capire la lingua che deve utilizzare, saremo perciò noi a dover decidere con che lingua deve essere inizializzato e per fare questo abbiamo due possibilità:
- Impostare la stessa lingua per tutti i datepicker
$.datepicker.setDefaults($.datepicker.regional['it']);
- Impostare la lingua per il singolo datepicker
$(selettore).datepicker($.datepicker.regional['it']);
Scusa se te lo chiedo ma potrei sapere il codice HTML finale da inserire nella pagina
RispondiElimina