Twitter Bootstrap Datepicker

Twitter Bootstrap è un framework Javascript e CSS leggero e pieno di funzionalità interssanti.

Tra queste, però, gli manca un datepicker.

Lo possiamo integrare però attraverso un plugin esterno scaricabile da qua.

Una volta scaricati entrambi, aggiungiamoli alla pagina:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" href="bootstrap/css/datepicker.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Questi sono i JS e i CSS che ci servono; script.js è dove metteremo il codice per impostare il datepicker.

A questo punto creiamo una input text che ci servirà per mettere il datepicker:

<input type="text" id="dp" name="data">

Infine impostiamo il picker:

$(document).ready(function() {

    $('#dp').datepicker({
        format: 'yyyy-mm-dd'
    });
});

Con l'opzione format gli diciamo in che formato vogliamo visualizzare la data.

Ovviamente ci stanno altre opzioni e funzioni interessanti, e vi invito a guardare la doc sul link messo sopra.