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