如何在 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中文網其他相關文章！