jQuery UI Datepicker: add custom navigation elements by year

Once I ran into a problem when the customer rested with arms and legs, refused the standard way of navigating through the years, i.e. from drop down list. Gave me a picture of the desired result and set a timeline.



In the image, the navigation elements in the form of single arrows “walk” by months, while the double ones are intended for switching to the previous / next year. In this post I will tell you how to achieve this result.

Decision

After a fairly long search for a solution to this seemingly simple task, it became clear that this datepicker has no options / methods for implementing the ordered “2 clicks”. The search led me to ways of adding additional buttons on the button panel, changing the step (number of months) of existing navigation elements. But it was not that. It was necessary to add exactly two more buttons to the header of the calendar, next to the month navigation elements.
')
Then I decided to see how the navigation was implemented by months in order to further artificially add similar elements. I go to firebug, find the button for switching to the previous month and see the following:



:

._adjustDate('#tbLoungeDate', -1, ' Y ');

, , . . header . , /. , - DIV "ui-datepicker-header" . /. :

var addPrevNextYearButtons = function (input) { setTimeout(function () { var btnPrev = $("<a title='Prev year'><span>prev year</span></a>"); btnPrev.addClass("ui-datepicker-prev-year ui-corner-all"); btnPrev.click(function () { $.datepicker._adjustDate(input, -1, 'Y'); }); var btnNext = $("<a title='Next year'><span>next year</span></a>"); btnNext.addClass("ui-datepicker-prev-year ui-corner-all"); btnNext.click(function () { $.datepicker._adjustDate(input, 1, 'Y'); }); var datepickerHeader = $(input).datepicker("widget").find('.ui-datepicker-header'); datepickerHeader.append(btnPrev); datepickerHeader.append(btnNext); }, 1); }; $('#tbLoungeDate').datepicker({ beforeShow: function (input, inst) { addPrevNextYearButtons(input); }, onChangeMonthYear: function (year, month, inst) { addPrevNextYearButtons(inst.input[0]); } });
, . , / "click" header . , .

. . .

 
 
            : 
 
 ._adjustDate('#tbLoungeDate', -1, ' Y '); 
 
 , ,  .    .     header .     ,      /.  , -       DIV   "ui-datepicker-header"  .          /.    : 
 
 var addPrevNextYearButtons = function (input) { setTimeout(function () { var btnPrev = $("<a title='Prev year'><span>prev year</span></a>"); btnPrev.addClass("ui-datepicker-prev-year ui-corner-all"); btnPrev.click(function () { $.datepicker._adjustDate(input, -1, 'Y'); }); var btnNext = $("<a title='Next year'><span>next year</span></a>"); btnNext.addClass("ui-datepicker-prev-year ui-corner-all"); btnNext.click(function () { $.datepicker._adjustDate(input, 1, 'Y'); }); var datepickerHeader = $(input).datepicker("widget").find('.ui-datepicker-header'); datepickerHeader.append(btnPrev); datepickerHeader.append(btnNext); }, 1); }; $('#tbLoungeDate').datepicker({ beforeShow: function (input, inst) { addPrevNextYearButtons(input); }, onChangeMonthYear: function (year, month, inst) { addPrevNextYearButtons(inst.input[0]); } }); 
  ,          .   ,       /    "click"     header .     ,       . 
 
   .   .         . 



:

._adjustDate('#tbLoungeDate', -1, ' Y ');

, , . . header . , /. , - DIV "ui-datepicker-header" . /. :

var addPrevNextYearButtons = function (input) { setTimeout(function () { var btnPrev = $("<a title='Prev year'><span>prev year</span></a>"); btnPrev.addClass("ui-datepicker-prev-year ui-corner-all"); btnPrev.click(function () { $.datepicker._adjustDate(input, -1, 'Y'); }); var btnNext = $("<a title='Next year'><span>next year</span></a>"); btnNext.addClass("ui-datepicker-prev-year ui-corner-all"); btnNext.click(function () { $.datepicker._adjustDate(input, 1, 'Y'); }); var datepickerHeader = $(input).datepicker("widget").find('.ui-datepicker-header'); datepickerHeader.append(btnPrev); datepickerHeader.append(btnNext); }, 1); }; $('#tbLoungeDate').datepicker({ beforeShow: function (input, inst) { addPrevNextYearButtons(input); }, onChangeMonthYear: function (year, month, inst) { addPrevNextYearButtons(inst.input[0]); } });
, . , / "click" header . , .

. . .