jQuery Mobile Datepicker

jQuery Mobile lo conosciamo, è un ottimo framework basato su jQuery indirizzato al mobile.

Tra i componenti ne manca uno essenziale, a mio parere: un datepicker.

In giro ci sono vari datepicker indirizzati al mobile, e tra questi io personalmente ho scelto DateBox.

Le opzioni, come potete vedere, sono tantissime e l'aspetto grafico in perfetto stile jQuery Mobile.

Per poter usare il plugin, dobbiamo incorporare sia jQuery che jQuery Mobile:

        <link rel="stylesheet" href="css-js/jquery.mobile.css">
        <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css">
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>

Come potete vedere possiamo anche scegliere le lingue incorporando il file apposito.

Poi non dobbiamo far altro che impostare il tutto dentro la input text; ad esempio:

<input name="mydate" id="mydate" type="date" data-role="datebox"
                           data-options='{"mode": "calbox", "calUsePickers": true, "calNoHeader": true}'>

Infine se vogliamo forzare la formattazione della data dentro la casella di testo ci servirà questo:

jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'overrideDateFormat': '%Y-%m-%d'
});

Tutto qua!

Vi conviene farvi un bel giro sul sito per vedere tutte le altre opzioni possibili.

Enjoy!