DatePicker

DatePicker 結合了 DateInput 和日曆彈出視窗，讓使用者可以輸入或選擇日期和時間值。

安裝

上述命令僅適用於單獨安裝。如果已全域安裝 @nextui-org/react ，則可以跳過此步驟。

導入

用法

已停用

唯讀

必填

變體

標籤位置

您可以透過將 labelPlacement 屬性設定為 inside、outside 或 outside-left 來變更標籤的位置。

注意：如果未傳遞 label，則 labelPlacement 屬性預設為 outside。

帶有描述

您可以透過傳遞 description 屬性，為日期選擇器新增描述。

帶有錯誤訊息

您可以結合 isInvalid 和 errorMessage 屬性來顯示無效的輸入。

您也可以將錯誤訊息作為函式傳遞。這允許根據 ValidationResult 進行動態錯誤訊息處理。

帶有月份和年份選擇器

您可以通過將 showMonthAndYearPickers 屬性設定為 true，在日曆彈出視窗中顯示月份和年份選擇器。但是，如果將大於 1 的數字傳遞給 visibleMonths 屬性，則會停用此功能。

帶有時間欄位

選擇器圖示

您可以使用 selector 在日期選擇器的開頭和結尾新增內容。

選擇器按鈕位置

您可以通過將 selectorButtonPlacement 屬性設定為 start 或 end 來更改選擇器按鈕的位置。

受控模式

您可以使用 value 和 onChange 屬性來控制輸入值。

時區

當以 ZonedDateTime 物件作為值提供時，DatePicker 具有時區感知能力。在這種情況下，會顯示時區縮寫，並且在操作值時會考慮到日光節約時間等時區問題。

@internationalized/date 包含將多種格式的字串解析為 ZonedDateTime 物件的函式。

粒度

粒度屬性可讓您控制 DatePicker 顯示的最小單位。預設情況下，值會以「天」的粒度（年、月和日）顯示，而 CalendarDateTime 和 ZonedDateTime 值則以「分鐘」的粒度顯示。

@internationalized/date 包含將多種格式的字串解析為 ZonedDateTime 物件的函式。

最小日期和最大日期

minValue 和 maxValue 屬性也可用於確保值在特定範圍內。

@internationalized/date 包含將多種格式的字串解析為 ZonedDateTime 物件的函式。

國際日曆

DatePicker 支援選擇全球多種日曆系統中的日期，包括公曆、希伯來曆、印度曆、伊斯蘭曆、佛教曆等等。日期會自動以使用者地區的適當日曆系統顯示。可以使用Unicode 日曆地區擴展覆蓋日曆系統，並將其傳遞給I18nProvider元件。

@internationalized/date 包含將多種格式的字串解析為 ZonedDateTime 物件的函式。

不可用日期

DatePicker 支援將某些日期標記為不可用。這些日期使用者無法選擇，並且在日曆中會以刪除線的外觀顯示。在日期欄位中，如果使用者輸入不可用的日期，則會顯示無效狀態。

@internationalized/date 包含將多種格式的字串解析為 ZonedDateTime 物件的函式。

可見月份

預設情況下，日曆彈出視窗會顯示單個月份。visibleMonths 屬性允許一次顯示最多 3 個月，如果螢幕空間允許的話。

頁面行為

預設情況下，當按下下一個或上一個按鈕時，分頁會以前進或後退 visibleMonths 的值。可以將 pageBehavior 設定為 single，將此行為更改為一次只翻頁一個月。

預設值

@internationalized/date 包含將多種格式的字串解析為 ZonedDateTime 物件的函式。

插槽

• base：輸入框外層容器，它處理對齊、放置和整體外觀。
• selectorButton：選擇器按鈕元素。
• selectorIcon：選擇器圖示元素。
• popoverContent：日曆彈出視窗元素。
• calendar：日曆元素。
• calendarContent：日曆的內容元素。
• timeInputLabel：時間輸入元件的標籤元素。
• timeInput：時間輸入元件元素。

資料屬性

DatePicker 在 base 元素上具有以下屬性

• data-slot：所有插槽都有這個屬性，表示該元素代表哪個插槽（例如：calendar）。
• data-open：表示日曆彈出視窗是否開啟。
• data-invalid：當日期選擇器無效時。基於 isInvalid 屬性。
• data-required：當日期選擇器為必填時。基於 isRequired 屬性。
• data-readonly：當日期選擇器為唯讀時。基於 isReadOnly 屬性。
• data-disabled：當日期選擇器被禁用時。基於 isDisabled 屬性。

無障礙性

• 每個日期和時間單位都顯示為可單獨聚焦和編輯的區段，這讓使用者可以使用鍵盤，以任何日期格式和地區輕鬆編輯日期。
• 使用者還可以開啟日曆彈出視窗，以標準的月份網格選擇日期。
• 包含本地化的螢幕閱讀器訊息，以宣告何時選取項目和可見日期範圍變更。
• 日期區段可以使用易於使用的數字鍵盤進行編輯，並且所有互動都可以使用基於觸控的螢幕閱讀器進行訪問。
• 與 HTML 表單整合，支援必填、最小值和最大值、不可用的日期、自訂驗證函數、即時驗證和伺服器端驗證錯誤

API

DatePicker 屬性

DatePicker 事件