Pick Month and Year Only Via jQuery UI DatePicker

Are you using jquery UI datepicker in your web based application and in some case you only want to display month and year dropdown which select only month with year then in this post I am going to share simple jQuery Datpicker hack which you can apply on your datapicker where you want only pick month and year.

JS

Here is the function which only pick month and year, on close and select date picker.

$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
    });
});

CSS

This single line of css code will hide dates form datepicker.

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

    
    
    
    
    


    Date :
    

See live demo and download source code.

DEMO

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.