Datepicker with double arrows for years

An implementation to extend Jquery UI datepicker to allow change years using double arrows "<<" ">>"

by Emmanuel Garcia

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

CSS

.ui-datepicker-next{ background-color:#3565B2 !important;}

JavaScript

var dates = $("#fromDate").datepicker({
    changeYear: true,
    beforeShow: function(input) {
        setTimeout(function() {
            var widgetHeader = $(input).datepicker("widget").find(".ui-datepicker-header");
            var prevYrBtn = $('<button title="PrevYr">&lt;&lt; Prev Year</button>');
            prevYrBtn.unbind("click").bind("click", function() {
                $.datepicker._adjustDate($(input), -1, 'Y');

            });
            var nextYrBtn = $('<button title="NextYr">Next year &gt;&gt;</button>');
            nextYrBtn.unbind("click").bind("click", function() {
                $.datepicker._adjustDate($(input), +1, 'Y');

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

        }, 1);
    }
});


$(document).ready( function(){

  $('#datepicker').datepicker({
    minDate: "01/01/1965",
    maxDate: "12/31/2005",
    startDate: "01/01/1965",
    endDate:    "12/31/2005",
    changeYear: true,
    changeMonth: true,
    autoclose: true
  });

  $('.prev i').removeClass();
  $('.prev i').addClass("fa fa-chevron-left");

  $('.next i').removeClass();
  $('.next i').addClass("fa fa-chevron-right");

});