Datepicker with double arrows for years
An implementation to extend Jquery UI datepicker to allow change years using double arrows "<<" ">>"
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<label for="from">From</label>
<input type="text" id="fromDate" name="fromDate"/>
JavaScript
var dates = $("#fromDate").datepicker({
beforeShow: function(input) {
setTimeout(function() {
var widgetHeader = $(input).datepicker("widget").find(".ui-datepicker-header");
var prevYrBtn = $('<button title="PrevYr"><< Prev Year</button>');
prevYrBtn.unbind("click").bind("click", function() {
$.datepicker._adjustDate($(input), -1, 'Y');
});
var nextYrBtn = $('<button title="NextYr">Next year >></button>');
nextYrBtn.unbind("click").bind("click", function() {
$.datepicker._adjustDate($(input), +1, 'Y');
});
prevYrBtn.appendTo(widgetHeader);
nextYrBtn.appendTo(widgetHeader);
}, 1);
},
onChangeMonthYear: function (year, month, inst) {
alert("777");
}
});