jQuery UI MonthPicker

A month Picker plugin for jQuery UI.

by Liu David

HTML

<link rel="stylesheet" href="https://rawgit.com/KidSysco/jquery-ui-month-picker/master/demo/Demo.min.css">
<script src="https://rawgit.com/KidSysco/jquery-ui-month-picker/master/demo/Demo.min.js"></script>
<base href="https://rawgit.com/benjamin-albert/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 5 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 id="JQButton" type="text" />
        </p>
        
        <p class="demo"> <b>MinMonth and MaxMonth Demonstration</b>

            <br />This demonstrates how you can limit the user to chooseing months within a given...

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;
}

body {
    margin: 15px 20px;
}

JavaScript

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

// Default functionality.
$('.Default').MonthPicker({
  i18n: {
     year: "年",
     prevYear: "l'前年",
     nextYear: "l'后年",
     months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  }
});

// Hide the icon and open the menu when you 
// click on the text field.
var minDate = new Date('2010-01-01');
var maxDate = new Date('2014-12-31');

$('#NoIconDemo').MonthPicker({ 
	Button: false,
  i18n: {
     year: "年",
     prevYear: "l'前年",
     nextYear: "l'后年",
     months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  MaxMonth: maxDate,
  MinMonth:minDate
  });

// 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="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...