JQuery UI DatePicker в следующем и предыдущем году

Question

В стандартном виджете jquery.ui.datepicker есть только следующая и предыдущая кнопки для выбора месяца.Если я включу год, он будет отображаться в поле выбора.

Что было бы хорошим способом реализовать две кнопки на обеих сторонах календаря?Один для выбора следующего месяца и один для выбора следующего года, отображаются рядом друг с другом с правой стороны и, конечно же, делают то же самое для предыдущих кнопок с левой стороны.

$(function() {
  $("#dp").datepicker({changeYear: true});
})

Answer 1

Лучшее решение, которое я нашел, - это объединить ответ Лениеля с некоторыми другими свойствами, вот код, который у меня есть для моих элементов даты

jQuery(document).ready(function(){
    jQuery('input.date').each(function(){
        jQuery(this).datepicker({dateFormat:'dd/mm/yy', changeMonth: true,    stepMonths: 12, showAnim:"slideDown" });
        jQuery('#ui-datepicker-div .ui-helper-hidden-accessible').css("position", "absolute !important");
        jQuery('#ui-datepicker-div').css('clip', 'auto');
    });

Надеюсь, это поможет кому-то еще так же, как и мне!

P.S. Другое дело, что средство выбора даты работает во всех браузерах (т.е. 6+, ff3 +, chrome4 +, safari, opera)

Answer 2

Если вы просто хотите заменить текущее поведение кнопок «Далее» и «Предыдущий», чтобы при нажатии на них вы переходили на другой год, вы могли использовать опцию StepMonths :

$( ".selector" ).datepicker({ stepMonths: 12 });

Answer 3

Посмотрите в файле javascript, где создаются кнопки «предыдущий / следующий».

<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1329396041654.datepicker._adjustDate('#datepicker', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>

Выше приведен пример сгенерированной кнопки prev.

Что вам нужно сделать, это просто создать кнопки «предыдущий / следующий», которые имеют следующее:

_adjustDate('#datepicker',-1,'Y');
_adjustDate('#datepicker',+1,'Y');

как их функции. Проверьте образец на http://jqueryui.com/demos/datepicker/dropdown-month-year.html и с помощью Firefox / Chrome 'проверьте элемент на кнопке prev - настройте его так, чтобы использовать «Y» вместо «M», и вы увидите, как он работает.

Надеюсь, это поможет!