Home

The jQuery UI Month Picker

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 and localization and more.

See a demo on jsFiddle at...
http://jsfiddle.net/kidsysco/JeZap/

Upgrading from version 2.x.x?

Please read the 3.x Upgrade Guide

Prerequisites

This plugin has been tested using the following configuration.

• jQuery 1.11.3
• jQuery UI 1.11.4
  • jQuery UI Widget Factory required
  • .button() plugin required
  • .datepicker() plugin required
  • .position() plugin optional (highly recommended see Position option)
• (optional) Digital Bush Masked Input jQuery Plugin

Installation

Attach all required CSS and JS files to the web page as follows...

<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/MonthPicker.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
<script src="https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.min.js" type="text/javascript"></script>
<script src="MonthPicker.min.js" type="text/javascript"></script>

Source Code Example

This plugin can only be called on a div, span, text input, or the HTML 5 Month Input Types as follows.

$('#TextBox1').MonthPicker({ StartYear: 2020, ShowIcon: false });
$('input[type=month]').MonthPicker().css('backgroundColor', 'lightyellow');