How can I disable month selection in the jQuery datepicker?

Question

I am trying disable the left/right buttons that allow the user to change months. I\'ve removed the drop down list of months but can\'t get rid of the buttons.

Answer 1

You can effectively disable them using stepMonths by making them go nowhere when clicked, like this:

$("#date").datepicker({
  changeMonth: false,
  changeYear: false,
  dateFormat: 'dd/mm/yy',
  duration: 'fast',
  stepMonths: 0
});

You can give it a try here

Or, you could remove the buttons like this:

$("#date").datepicker({
  changeMonth: false,
  changeYear: false,
  dateFormat: 'dd/mm/yy',
  duration: 'fast'
}).focus(function() {
  $(".ui-datepicker-prev, .ui-datepicker-next").remove();
});​

You can give that a try here, this works because the default showOn option is focus, if you're using a different event, just bind to that after the .datepicker() call (so its event runs first, you can't hide what isn't created yet).

Answer 2

This is my way to make datepicker pick only year:

if (document.styleSheets[0].addRule) {
   document.styleSheets[0].addRule(".ui-datepicker-calendar", "display: none;");
else {
   document.styleSheets[0].insertRule(".ui-datepicker-calendar {display: none;}", 0);
}

 .datepicker({    
                  dateFormat: 'yy',
                  showMonthAfterYear: false,
                  changeMonth: false,
                  changeYear: true,
                  showButtonPanel: true,
                  stepMonths: 12,
                  monthNames: ["", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                  onChangeMonthYear: function (year) {
                      $(this).val(year);
                  }
             });

Answer 3

I don't know how to do it directly in jQuery (or if it's possible).

But if you can't find a way to do it in there, you could always just hide the buttons in css.

The css selectors you want are (from memory so you might need to check)

.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next
{
    display:none;
}

Answer 4

The mentioned solution did not work for me, I developped this:

$('#datepicker').find('.ui-datepicker-next').remove();
$('#datepicker').find('.ui-datepicker-prev').remove();