Jquery UI DatePicker to show month year only

javascript

prompt-engineering

responsive-design

best-practices

byNikita Barsukov·Feb 27, 2025

Turn the "jQuery UI DatePicker" into a "month/year" picker using these options:

// Because ain't nobody got time for entering days!
$("#yourElement").datepicker({
    dateFormat: 'MM yy',      // "Only month and year, thank you!"
    changeMonth: true,        // I solemnly swear that I CAN change the month
    changeYear: true,         // Ditto for the year!
    showButtonPanel: true,         // Button, button, who gets the button?
    onClose: function(dateText, inst) {
        // When things get serious...
        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));
    },
    beforeShow: function(input, inst) {
        // Before the magic happens...
        var date;
        try {
            date = $.datepicker.parseDate(inst.settings.dateFormat, input.value);
        } catch (error) {
            // Whoops! Errors happen...
            date = null;
        }
        $(this).datepicker('option', 'defaultDate', date); // Your date is served!
        $(this).datepicker('setDate', date);
        setTimeout(function(){ // Can I get a drum roll, please?
            $('#ui-datepicker-div').toggleClass('hide-calendar');
        }, 1);
    }
});

/* Hide the calendar, we only need month and year. Or do we need the Gregorian? */
.hide-calendar .ui-datepicker-calendar {
    display: none;
}

/* Let's get things together! */
.hide-calendar .ui-datepicker-inline {
    width: auto;
}

This code will ensure your date picker only shows the month and year to users, excluding the daily view.

User Experience: A Deeper Understanding

Now, the real trick is managing how the application behaves when a user decides to clear out the input box. The solution accommodates this by rendering the input value removable.

Ever thought about pushing user-friendly features even further? Get creative! Add a clear button for better user interaction.

Provide them with the best keyboard navigation with up-to-date ARIA roles and properties for an out-of-the-world experience!

With great power comes great respons...Customization!

Aim for the sky, fellow coders! Take the DatePicker to another level:

Expand with additional options

Harness the power of $.extend() to globally adjust default options:

$.extend($.datepicker, {
    // Add incredible custom options here
});

Crafted with love

Don't forget to link the jQuery UI CSS file for styling:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Make it your own with tailored styles:

.ui-datepicker-title {
    /* Tailor-fit styles here */
}

Browser Beaters

Confirm your DatePicker works flawlessly on every browser you target.

Problem? No Problem

Possible problem? Throw it my way:

Premature Picker: Ensure selecting a month or year doesn't make the picker close earlier than intended.
Leap Year: February needs to display the correct options - Don't let it spoil your party!
Focus Control: Avoid having the focus stuck in the datepicker dialog.