Month and Year Datepicker for Multiple Fields

This variation applies the month/year-only Datepicker to multiple input fields. The original page used duplicate IDs; this version keeps the same multi-field purpose while using valid unique IDs and a shared class.

Shared Class for Multiple Fields Top ↑

<input id="month_start" class="date-picker form-control">
<input id="month_end" class="date-picker form-control">

Initialize Every Matching Field Top ↑

$( ".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 )
        );
    }
});

Optional Date Limits Top ↑

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

See jQuery UI Datepicker for all date formats, year ranges, minimum/maximum dates and linked calendar examples.

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: