如何在 jQuery UI DatePicker 中仅显示月份和年份？

在 jQuery UI DatePicker 中仅显示月份和年份

jQuery UI DatePicker 是用于在 Web 应用程序中显示日历的多功能工具。如果您希望使用此插件仅显示月份和年份，而不是整个日历，请按以下步骤操作：

一个聪明的解决方案涉及对 HTML 和 JavaScript 代码进行轻微修改。在 HTML 中，将自定义类添加到要显示月份和年份的输入字段。在 JavaScript 代码中，使用此类向 DatePicker 配置添加必要的选项。

具体来说，您需要的选项是：

• changeMonth：允许更改月份
• changeYear：允许更改年份
• showButtonPanel：显示带有“完成”和的按钮面板“今天”按钮
• dateFormat：指定输出格式为“MM yy”（例如，5 月 10 日）
• onClose：用所选月份和年份更新输入字段的回调函数

要阻止日历显示，请添加 CSS 样式来隐藏日历元素(ui-datepicker-calendar)。

这是一个完整的示例：

<label for="startDate">Date:</label>
<input name="startDate">

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

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

此 hack 将允许您在 jQuery UI 中仅显示月份和年份DatePicker 不影响其功能。

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