Date Picker with previous and next Buttons

Date Picker with previous and next Buttons

by santosh_patnala

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 inputDate = $("#fromDate");
var changeYearButtons = function() {
    setTimeout(function() {
        var widgetHeader = inputDate.datepicker("widget").find(".ui-datepicker-header");
        //you can opt to style up these simple buttons tho
        var prevYrBtn = $('<button title="PrevYr">&lt;&lt; Prev Year</button>');
        prevYrBtn.bind("click", function() {
            $.datepicker._adjustDate(inputDate, -1, 'Y');
        });
        var nextYrBtn = $('<button title="NextYr">Next year &gt;&gt;</button>');
        nextYrBtn.bind("click", function() {
            $.datepicker._adjustDate(inputDate, +1, 'Y');

        });
        prevYrBtn.appendTo(widgetHeader);
        nextYrBtn.appendTo(widgetHeader);

    }, 1);
};

var dates = $("#fromDate").datepicker({
    beforeShow: changeYearButtons,
    onChangeMonthYear: changeYearButtons
});