Visualizzare solo mese e anno in jQuery UI Datepicker

Sono passati anni , ormai, ma jQuery UI Datepicker continua ad essere il mio calendario preferito.

Sia per facilità di implementazione, che per la possibilità di personalizzazione.

Oggi vediamo come possiamo impostare il datepicker per visualizzare solo il mese e l'anno, omettendo il giorno.

Può essere utile nel caso si impostino periodi di tempo per mese / anno, tipo un budget.

Prima di tutto, impostiamo una regola CSS per nascondere il calendario:

.ui-datepicker-calendar { display: none; }

Provatela per vedere l'effetto.

Questo invece il Javascript per inizializzare il datepicker:

    $(function () {
        $('#datepicker_budget').datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'yy-mm',
            onClose: function (dateText, inst) {
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            }
        });
    });

Una prima opzione importante è dateFormat, con la quale impostiamo anno e mese (alla americana in questo caso).

Poi implementiamo l'evento onClose per impostare la data della casella di testo; questo perchè abbiamo nascosto il calendario, ed avviene quando clicchiamo sul tasto Done.

Per ottenere il risultato desiderato, trovo che sia la soluzione milgiore.

Enjoy!