jquery ui datepicker next and previous year

On the standard jquery.ui.datepicker widget there's o开发者_C百科nly a next and previous button for selecting a month. If I enable year, it will be displayed in a select box.

What would be a good way to implement two buttons on both sides of the calendar? One for selecting next month and one for selecting next year, displayed next to each other on the right side, and do the same for the previous buttons on the left side of course.

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

---

The best solution I have found is to combine Leniel's answer with some other properties, here is the code I have for my date elements

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');
    });

Hope this helps someone else as much as it did me!

P.S. The other stuff is so that the datepicker works in all browsers (ie6+,ff3+,chrome4+,safari,opera)

---

If you just wanted to replace the current behavior of the Next and Previous buttons so that when clicking them you'd go to another year, you can use the StepMonths option:

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

---

Have a look in the javascript file for where the prev/next buttons are created.

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

The above is an example of a generated prev button.

What you need to do is simply create prev/next buttons that have the following:

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

As their functions. Check the sample at http://jqueryui.com/demos/datepicker/dropdown-month-year.html and using firefox/chrome 'inspect element on the prev button - adjust it to use 'Y' instead of 'M' and you will see how it works.

Hope this helps!