jquery ui datepicker next and previous year

Question

On the standard jquery.ui.datepicker widget there's only 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});
})

Answer 1

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)

Answer 2

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