Select Month and Year Only with jQuery UI Datepicker

This Datepicker variation lets the user select a month and year only. The day grid is hidden, while the month/year dropdowns and button panel remain available.

Hide the Day Grid Top ↑

body.month-year-picker-page .ui-datepicker-calendar {
    display: none;
}

HTML Top ↑

<input name="MonthYear"
       id="MonthYear"
       class="date-picker form-control">

Initialize the Month/Year Picker Top ↑

$( function () {
    $( ".date-picker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: "mm/yy",

        onClose: function ( dateText, inst ) {
            const month =
                inst.dpDiv.find( ".ui-datepicker-month :selected" ).val();

            const year =
                inst.dpDiv.find( ".ui-datepicker-year :selected" ).val();

            $( this ).datepicker(
                "setDate",
                new Date( year, month, 1 )
            );
        }
    });
});

The stored Date object uses the first day of the selected month, while the input displays only mm/yy.

Limit the Month Range Top ↑

defaultDate: "-1m",
maxDate: "+1m"

The same Datepicker options described in the main Datepicker tutorial can restrict the range.

Use this pattern with multiple month/year fields →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: