jQuery UI MonthPicker
A month Picker plugin for jQuery UI.
by wintlu
HTML
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.min.js"></script>
<script src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script>
<div style="width: 650px;">
<h1>
The jQuery UI Month Picker Plugin</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 & Unit Testing</h2>
<blockquote>
<p class="demo"> <b>Icon Demonstration</b>
<br />This demonstrates the default option for showing an icon.
<br />
<br />Choose a Month:
<input id="IconDemo" type="text" />
</p>
<p class="demo"> <b>No Icon Demonstration</b>
<br />This demonstrates setting options for removing the icon.
<br />
<br />Choose a month:
<input id="NoIconDemo" type="text" />
</p>
<p class="demo"> <b>Start Year Demonstration</b>
<br />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.
<br />
<br />Choose a month:
<input id="StartYearDemo" type="text" value="01/2025" />
</p>
<p class="demo"> <b>Override Start Year...CSS
.month-picker {
width: 200px;
display: none;
position: absolute;
z-index: 9999;
}
.month-year-input {
width: 60px;
}
.month-picker .year-container-all {
cursor: pointer;
}
.month-picker-year-table .year-container-all {
text-align: center;
}
.month-picker-year-table .year-title, .month-picker-year-table .year-container {
float: left;
display: inline-block;
}
.month-picker-year-table .year-title {
margin-left: 20px;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
.month-picker-year-table .year {
margin-right: 15px;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
.month-picker-year-table .year-container {
width: 50px;
}
.month-picker-year-table .previous-year {
width: 35px;
}
.month-picker-year-table .next-year {
width: 35px;
text-align: right;
}
.month-picker-year-table button {
width: 1.8em;
height: 1.8em;
text-align: center;
cursor: pointer;
}
.month-picker-year-table .year-container {
text-align: center;
}
.month-picker-month-table td {
height: 35px;
text-align: center;
font-size: 12px;
}
.month-picker-open-button {
height: 20px;
width: 20px;
vertical-align: bottom;
}
.month-picker-invalid-message {
display: none;
background-color: Yellow;
}
.month-picker-disabled {
background-color: #e1e1e1;
}
/******* ***************** ********/
/* Unit Testing CSS */
/******* ***************** ********/
body {
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
.option-block {
background-color: #e1e1e1;
display: none;
padding: 4px;
border: solid 1px Black;
}
.option {
margin: 20px;
border: solid 1px Gray;
padding: 4px;
}
.option-link {
text-decoration: underline;
color: Blue;
cursor: pointer;
font-weight: bold;
}
.option-link:hover {
color: Red;
}
.option-type {
margin: 0 25px;
}
.demo {
background-color: #e1e1e1;
padding: 8px;
border: solid...JavaScript
/*
Masked Input plugin for jQuery
Copyright (c) 2007-2013 Josh Bush (digitalbush.com)
Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
Version: 1.3.1
*/
(function(e){function t(){var e=document.createElement("input"),t="onpaste";return e.setAttribute(t,""),"function"==typeof e[t]?"paste":"input"}var n,a=t()+".mask",r=navigator.userAgent,i=/iphone/i.test(r),o=/android/i.test(r);e.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},dataName:"rawMaskFn",placeholder:"_"},e.fn.extend({caret:function(e,t){var n;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof e?(t="number"==typeof t?t:e,this.each(function(){this.setSelectionRange?this.setSelectionRange(e,t):this.createTextRange&&(n=this.createTextRange(),n.collapse(!0),n.moveEnd("character",t),n.moveStart("character",e),n.select())})):(this[0].setSelectionRange?(e=this[0].selectionStart,t=this[0].selectionEnd):document.selection&&document.selection.createRange&&(n=document.selection.createRange(),e=0-n.duplicate().moveStart("character",-1e5),t=e+n.text.length),{begin:e,end:t})},unmask:function(){return this.trigger("unmask")},mask:function(t,r){var c,l,s,u,f,h;return!t&&this.length>0?(c=e(this[0]),c.data(e.mask.dataName)()):(r=e.extend({placeholder:e.mask.placeholder,completed:null},r),l=e.mask.definitions,s=[],u=h=t.length,f=null,e.each(t.split(""),function(e,t){"?"==t?(h--,u=e):l[t]?(s.push(RegExp(l[t])),null===f&&(f=s.length-1)):s.push(null)}),this.trigger("unmask").each(function(){function c(e){for(;h>++e&&!s[e];);return e}function d(e){for(;--e>=0&&!s[e];);return e}function m(e,t){var n,a;if(!(0>e)){for(n=e,a=c(t);h>n;n++)if(s[n]){if(!(h>a&&s[n].test(R[a])))break;R[n]=R[a],R[a]=r.placeholder,a=c(a)}b(),x.caret(Math.max(f,e))}}function p(e){var t,n,a,i;for(t=e,n=r.placeholder;h>t;t++)if(s[t]){if(a=c(t),i=R[t],R[t]=n,!(h>a&&s[a].test(i)))break;n=i}}function g(e){var...