Pick month and year with this jQuery plugin.
The plugin accepts a few options:
yearsarray of years to select fromtopOffsetdistance in pixels from the element offsetonMonthSelectevent triggered when selecting a month
Example:
$('#monthpicker').monthpicker({
years: [2015, 2014, 2013, 2012, 2011],
topOffset: 6,
onMonthSelect: function(m, y) {
console.log('Month: ' + m + ', year: ' + y);
}
});See more at examples folder.
The HTML generated for the popup is shown below:
<div class="monthpicker">
<div class="years">
<select>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
</select>
</div>
<table>
<tr>
<td><button data-value="0">January</button></td>
<td><button data-value="1">February</button></td>
<td><button data-value="2">March</button></td>
<td><button data-value="3">April</button></td>
</tr>
<tr>
<td><button data-value="4">May</button></td>
<td><button data-value="5">June</button></td>
<td><button data-value="6">July</button></td>
<td><button data-value="7">August</button></td>
</tr>
<tr>
<td><button data-value="8">September</button></td>
<td><button data-value="9">October</button></td>
<td><button data-value="10">November</button></td>
<td><button data-value="11">December</button></td>
</tr>
</table>
</div>Some initial styles are added in the css/jquery.monthpicker.css file. You can change them as you please.
Run tests at test folder with QUnit.
jQuery.monthpicker is licensed under the terms of the MIT License.