如何修改 jQuery UI DatePicker 以仅显示月份和年份？

修改 jQuery UI DatePicker 以仅显示月份和年份

在 Web 应用程序中，动态显示交互式日期选择器可能至关重要。 jQuery UI 为此提供了一个多功能的 DatePicker 插件。但是，在某些情况下，您可能更喜欢仅显示月份和年份，而不显示日历网格本身。

为了满足这种需求，让我们探索修改 DatePicker 行为的 JavaScript 技巧：

$('.date-picker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  onClose: function(dateText, inst) {
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
  }
});

在提供的代码片段中，onClose 回调起着至关重要的作用。当日期选择器面板关闭时，它确保只有选定的月份和年份值反映在输入字段中。 setDate() 方法不是选择特定的日期，而是将输入的日期设置为所选月份和年份的第一天。

要完成修改，您需要使用 CSS 设置日期选择器的样式隐藏日历网格：

.ui-datepicker-calendar {
  display: none;
}

通过这些 JavaScript 和 CSS 调整，您可以有效地使用 jQuery UI DatePicker 单独显示月份和年份选项，以满足特定用户界面的要求您的申请。

以上是如何修改 jQuery UI DatePicker 以仅显示月份和年份？的详细内容。更多信息请关注PHP中文网其他相关文章！