jQuery UI Month Picker Plugin

About

The jQuery UI Month Picker Plugin is designed to allow user input for only a month and year when only that input is required. Clicking on the year, allows the user to jump ahead or back 12 years at a time. Clicking anywhere on the page, except on the month picker menu itself, will cause the month picker to hide. The Month Picker has lots of options for date validation, setting the start year, using an icon button, input masking, internationalization, localization and more.

Default functionality

This demonstrates the plugin's default functionality.

Choose a Month:

Button Demonstration

This demonstrates how you can customize every aspect of the open button. See the Button documenation for details on handeling internationalization.

No button:


Image button:


Plain HTML button:


jQuery UI button:

MinMonth and MaxMonth Demonstration

This demonstrates how you can limit the user to chooseing months within a given interval.

Future months only:


Past months only:


18 months from today:

Start Year Demonstration

This demonstrates how the plugin will default to the year specified in the text box. Changing the year in the text box will result in a new default year for the chooser and if no date is selected then the default year is the current year.

Choose a month:

Override Start Year Demonstration

This demonstrates how the MonthPicker can be configured to override the start year default behavior. This MonthPicker will start on 2023 no matter which date is currently selected, even if no date is specified.

Choose a month:

Get Month/Year & Validation API Demonstration

This demonstrates API usage for the GetSelectedMonthYear(), GetSelectedYear() and GetSelectedMonth() function calls which will also perform date validation. Clear() will clear the text field and any validation messages.

Choose a month:

Get Year Get Month Get Month and Year Clear

Disable/Enable API Demonstration

This demonstrates API usage for the Enable() and Disable().

Choose a month:
Disable Enable

Digital Bush Integration Demonstration

This demonstrates how the MonthPicker plugin integrates with the Digital Bush Plugin for Input Masking as well as the html 5 placeholder attribute to simulate watermarking. Try to type an invalid date and try the Get Month/Year button to fire off validation.

Type in a month/year:


Type in a month/year:


Clear All Get Month/Year

Month Format Demonstration

This demonstrates how you can display month feedback in a variety of ways. Choose a month format from the dropdown, then click on the input and select a month to see it in that format.

Date:

Format: Default - mm/yy ISO 8601 - yy-mm Short - M, y Medium - MM, y Full - mm MM, yy With text - MM 'in the year' yy

Alternate Field/Format Demonstration

This demonstrates how the AltField and AltFormat options work so that values shown to the user can be different than what is submitted to the server.

jQuery UI Dialog Integration Demonstration

This demonstrates the Month Picker running inside of the jQuery UI Modal Dialog.

Launch Dialog

Inline Menu Demonstration

This demonstrates the Month Picker menu inlined in a div tag.

HTML 5 Month Input Type Support

This demonstrates how the MonthPicker will work with the HTML 5 Month Input Type. View this section using Chrome to see Google's latest implementation in comparison.

Jquery UI Month Picker:

Chrome Month Picker:

.position() Integration Demonstration

This demonstrates the Month Picker integration with the optional .position() plugin. The menu should show on top of the input rather than below where the view would be obstructed.

Choose a month: