L'inserimento di date e orari nei form dei siti web è un'operazione molto frequente e in quanto tale si cerca di renderla più friendly possibile. Negli anni ho provato diversi plugin javascript (per carità, tutti funzionanti) ma mai uno che mi desse davvero soddisfazione. Tanto più ora con i layout responsive che, si sa, sono esigenti...
Qualche giorno fa ho trovato questo datepicker responsive (thanks to Amsul), l'ho scaricato da Github e l'ho provato. Secondo me è molto valido, principalmente per 3 motivi:
- è semplicissimo da usare
- è completissimo (ha un miliardo di opzioni, incluse le API per estenderne a piacimento le funzionalità!)
- è responsive
Per installarlo è sufficiente includere nella pagina i file .css, le librerie javascript fornite con il download e la libreria jQuery:
<link href="lib/themes/default.css" id="theme_base" rel="stylesheet" />
<link href="lib/themes/default.date.css" id="theme_date" rel="stylesheet" />
<link href="lib/themes/default.time.css" id="theme_time" rel="stylesheet" />
...
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="lib/picker.js"></script>
<script src="lib/picker.date.js"></script>
<script src="lib/picker.time.js"></script>
Questo plugin supporta i browser più moderni e IE8+. Se volete garantire la compatibilità con versioni più vecchie, ricordatevi di includere anche il file
<script src="lib/legacy.js"></script>
A questo punto per far funzionare il nostro datepicker responsive è sufficiente richiamarlo, ad esempio, sull'evento click di un tag con proprietà class=".datepicker"
<script type="text/javascript">?
$(".datepicker").click(function () {
$('.datepicker').pickadate();
});
</script>
L'utilizzo del timepicker è del tutto analogo; trovate la documentazione qui.