sabato 28 maggio 2011

Inserire il Datepicker di jQuery UI nella propria pagina web

Vorrei condividere la modalità di integrazione dei widget del progetto jQuery UI.
Spiegazione veloce
  1. Ottenere il pacchetto di jQuery UI
  2. Una volta decompresso il pacchetto, copiare nel proprio progetto web le cartelle css e js
  3. Copiare i file di traduzione desiderati dalla cartella development-bundle/ui/i18n nella cartella js
  4. 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>
  5. Creare un elemento input di tipo text e assegnargli una classe o un id
    <input type="text" class="datepicker" />
  6. 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à:
  1. Impostare la stessa lingua per tutti i datepicker
    $.datepicker.setDefaults($.datepicker.regional['it']);
  2. Impostare la lingua per il singolo datepicker $(selettore).datepicker($.datepicker.regional['it']);
Pagina di documentazione del Datepicker

1 commento:

  1. Scusa se te lo chiedo ma potrei sapere il codice HTML finale da inserire nella pagina

    RispondiElimina