如何在 jQuery UI DatePicker 中僅顯示月份和年份？-js教程-PHP中文網

首頁

web前端

js教程

如何在 jQuery UI DatePicker 中僅顯示月份和年份？

DDD

Nov 23, 2024 pm 09:32 PM

How Can I Display Only the Month and Year in a 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

PHP教程

1679

276

NYT連接提示和答案

332

836

Related knowledge

JavaScript實現點擊圖片切換效果：專業教程 Sep 18, 2025 pm 01:03 PM

本文將介紹如何使用JavaScript實現點擊圖片切換的效果。核心思路是利用HTML5的data-*屬性存儲備用圖片路徑，並通過JavaScript監聽點擊事件，動態切換src屬性，從而實現圖片切換。本文將提供詳細的代碼示例和解釋，幫助你理解和掌握這種常用的交互效果。

如何使用JavaScript中的GeOlocation API獲取用戶的位置？ Sep 21, 2025 am 06:19 AM

首先檢查瀏覽器是否支持GeolocationAPI，若支持則調用getCurrentPosition()獲取用戶當前位置坐標，並通過成功回調獲取緯度和經度值，同時提供錯誤回調處理權限被拒、位置不可用或超時等異常，還可傳入配置選項以啟用高精度、設置超時時間和緩存有效期，整個過程需用戶授權並做好相應錯誤處理。

JavaScript中DOM元素訪問的常見陷阱與解決方案 Sep 15, 2025 pm 01:24 PM

本文旨在解決JavaScript中通過document.getElementById()獲取DOM元素時返回null的問題。核心在於理解腳本執行時機與DOM解析狀態。通過正確放置標籤或利用DOMContentLoaded事件，可以確保在元素可用時再嘗試訪問，從而有效避免此類錯誤。

NUXT 3組成API解釋了 Sep 20, 2025 am 03:00 AM

Nuxt3的CompositionAPI核心用法包括：1.definePageMeta用於定義頁面元信息，如標題、佈局和中間件，需在中直接調用，不可置於條件語句中；2.useHead用於管理頁面頭部標籤，支持靜態和響應式更新，需與definePageMeta配合實現SEO優化；3.useAsyncData用於安全地獲取異步數據，自動處理loading和error狀態，支持服務端和客戶端數據獲取控制；4.useFetch是useAsyncData與$fetch的封裝，自動推斷請求key，避免重複請

如何在JavaScript中創建多行字符串？ Sep 20, 2025 am 06:11 AM

thebestatoreateamulti-linestlinginjavascriptsisisingsistisingtemplatalalswithbacktticks，whatpreserveticks，whatpreservereakeandeexactlyaswrite。

如何在JavaScript中使用setInterval創建重複間隔 Sep 21, 2025 am 05:31 AM

要創建JavaScript中的重複間隔，需使用setInterval()函數，它會以指定毫秒數為間隔重複執行函數或代碼塊，例如setInterval(()=>{console.log("每2秒執行一次");},2000)會每隔2秒輸出一次消息，直到通過clearInterval(intervalId)清除，實際應用中可用於更新時鐘、輪詢服務器等場景，但需注意最小延遲限制、函數執行時間影響，並在不再需要時及時清除間隔以避免內存洩漏，特別是在組件卸載或頁面關閉前應清理，確保