jQuery UI MonthPicker

A month Picker plugin for jQuery UI.

by Damith Nuwan Sampath

HTML

<link rel="stylesheet" href="https://rawgit.com/KidSysco/jquery-ui-month-picker/master/demo/MonthPicker.min.css">
<script src="https://rawgit.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js"></script>
<script src="https://rawgit.com/KidSysco/jquery-ui-month-picker/master/demo/MonthPicker.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/KidSysco/jquery-ui-month-picker/master/test/test.css">
<base href="https://rawgit.com/KidSysco/jquery-ui-month-picker/master/demo/">
<div>
     <h1>
            The jQuery UI Month Picker Plugin Version @VERSION</h1>

    <p>The jQuery UI Month Picker Plugin was designed to allow users to choose 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.</p>
    
     <h2>
            Demonstration</h2>

        <p class="demo"> <b>Default functionality</b>

            <br />This demonstrates the plugin's defualt functionality.
            <br />
            <br />Choose a Month:
            <input id="IconDemo" class='Default' type="text" />
        </p>
        <p class="demo button"> <b>Button Demonstration</b>
            <br />This demonstrates how you can customize every aspect of the open button.  
            See the <a href='http://github.com/KidSysco/jquery-ui-month-picker#button'>Button documenation</a> for details on handeling internationalization
            <br />
            <br />No button:
            <br />
            <input id="NoIconDemo" type="text" />
            <br />
            <br />Image button:
            <br />
            <input id="ImageButton" type="text" />
            <br />
            <br />Plain HTML button:
            <br />
            <input id="PlainButton" type="text" />
            <br />
            <br />jQuery UI button:
            <br />
            <input...

CSS

.icon {
    vertical-align: bottom;
    margin-top: 2px;
    margin-bottom: 3px;
    cursor: pointer;
}

.icon:active {
    opacity: .5;
}

.demo.button input {
    margin-right: 2px;
}

.demo.button .ui-button-text {
    padding: .4em .6em;
    line-height: 0.8;
}

input[type='text'] {
  width: 60px;
}

body {
    margin: 15px 20px;
}

JavaScript

// NOTE: Don't forget to wrap you code in:
// $(document).ready(function() { $('#id').MonthPicker(...); });

// Default functionality.
$('.Default').MonthPicker();

// Hide the icon and open the menu when you 
// click on the text field.
$('#NoIconDemo').MonthPicker({ Button: false });

// Create jQuery UI Datepicker's default button.
$("#PlainButton").MonthPicker({
    Button: '<button>...</button>'
});

// Create a button out of an image. 
// for details on handeling the disabled state see:
// https://github.com/KidSysco/jquery-ui-month-picker#button
$("#ImageButton").MonthPicker({
    Button: '<img class="icon" src="images/icon.gif" />'
});

// Creates a button out an a JQuery UI button. See:
// http://github.com/KidSysco/jquery-ui-month-picker#button
// for details on handeling internationalization.
$("#JQButton").MonthPicker({
    Button: function() {
        return $("<button>Open</button>").button();
    }
});

// Allows 1 months from today (future months only). 
$('#FutureDateDemo').MonthPicker({ MinMonth: 1 });

// Allows at most 1 month from today (past months only).
$('#PastDateDemo').MonthPicker({ MaxMonth: -1 });

// Don't allow this month and at most 18 months from today.
// For detaild on the datatyps you can pass see:
// http://github.com/KidSysco/jquery-ui-month-picker#minmonth
$('#YearAndAHalfDeom').MonthPicker({
    MinMonth: 0, 
    MaxMonth: '+2y -6m' // Or you could just pass 18.
});

// Start on the year 2023 no matter what date is selected.
$("#OverrideStartYear").MonthPicker({ StartYear: 2023 });

// Display an error message if the date is not valid.
$('#GetYearDemo').MonthPicker({
    ValidationErrorMessage: 'Invalid Date!'
});

// Apply an input mask which mkase sure the user 
// limits the user to typing a month in the 
//fromat specified in the MonthFormat option.
$('#DigitalBush').MonthPicker({ UseInputMask: true });
$('#DigitalBushBoth').MonthPicker({
    UseInputMask: true,
    ValidationErrorMessage: 'Invalid Date!'
});

// The...