如何在 jQuery 日期选择器中禁用月份选择？答案

【问题标题】：How can I disable month selection in the jQuery datepicker?如何在 jQuery 日期选择器中禁用月份选择？
【发布时间】：2010-08-17 11:20:33
【问题描述】：

我正在尝试禁用允许用户更改月份的左/右按钮。我删除了月份的下拉列表，但无法摆脱按钮。

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

【问题讨论】：

标签： jquery jquery-ui-datepicker

【解决方案1】：

您可以使用stepMonths 有效地禁用它们，方法是让它们在单击时无处可去，如下所示：

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

You can give it a try here

或者，您可以像这样删除按钮：

$("#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，这是因为默认的showOn 选项是focus，如果您使用不同的事件，只需在.datepicker() 调用之后绑定到那个（所以它事件先运行，您无法隐藏尚未创建的内容）。

【讨论】：

【解决方案2】：

上述解决方案对我不起作用，我开发了这个：

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

【讨论】：

【解决方案3】：

我不知道如何直接在 jQuery 中执行此操作（或者如果可能的话）。

但是，如果您在其中找不到方法，您可以随时将按钮隐藏在 css 中。

您想要的 css 选择器是（来自内存，因此您可能需要检查）

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

【讨论】：

【解决方案4】：

这是我让日期选择器只选择年份的方法：

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

【讨论】：