DateInput

DateInput 是一個允許使用者使用鍵盤輸入和編輯日期及時間值的元件。日期值的每個部分都會顯示在個別可編輯的區段中。

安裝

上面的指令僅用於單獨安裝。如果 @nextui-org/react 已經全域安裝，您可以跳過此步驟。

導入

用法

已停用

唯讀

必填

變體

標籤位置

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

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

開始 & 結束內容

您可以使用 startContent 和 endContent 屬性，在 DateInput 的開始和結束處添加內容。

帶有描述

您可以透過傳遞 description 屬性，為輸入框添加描述。

帶有錯誤訊息

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

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

受控模式

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

時區

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

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

精細度

粒度屬性允許您控制 DateInput 顯示的最小單位。預設情況下，該值以「day」粒度（年、月和日）顯示，並且 CalendarDateTime 和 ZonedDateTime 值以「minute」粒度顯示。

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

最小日期和最大日期

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

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

國際日曆

DateInput 支援選取全球多種日曆系統的日期，包括公曆、希伯來曆、印度曆、伊斯蘭曆、佛教曆等等。日期會根據使用者地區設定自動以適當的日曆系統顯示。可以使用Unicode 日曆地區設定擴展來覆寫日曆系統，此擴展會傳遞至 I18nProvider 元件。

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

隱藏時區

當 ZonedDateTime 物件作為 DateInput 的值提供時，預設會顯示時區縮寫。但是，如果時區縮寫顯示在其他地方或根據使用情況隱含，則可以使用 hideTimeZone 選項將其隱藏。

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

小時週期

預設情況下，DateInput 會根據使用者的地區設定，以 12 小時或 24 小時格式顯示時間。但是，如果特定使用情況需要，可以使用 hourCycle 屬性覆寫此設定。此範例會強制 DateInput 使用 24 小時制時間，無論地區設定為何。

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

插槽

• base：輸入包裝器，它處理對齊、位置和整體外觀。
• label：日期輸入的標籤，它顯示在日期輸入的上方、內部或左側。
• inputWrapper：包裝 label（當它在內部時）和 innerWrapper。
• input：日期輸入元素。
• innerWrapper：包裝 input、startContent 和 endContent。
• clearButton：清除按鈕，位於輸入框的末端。
• helperWrapper：包裝 description 和 errorMessage。
• description：日期輸入的描述。
• errorMessage：日期輸入的錯誤訊息。

資料屬性

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

• data-slot：所有插槽都有這個屬性。元素代表哪個插槽（例如 slot）。
• data-invalid：當日期輸入無效時。基於 isInvalid 屬性。
• data-required：當日期輸入為必填時。基於 isRequired 屬性。
• data-readonly：當日期輸入為唯讀時。基於 isReadOnly 屬性。
• data-disabled：當日期輸入為停用時。基於 isDisabled 屬性。
• data-has-helper：當日期輸入具有輔助文字（errorMessage 或 description）時。基於這兩個屬性。
• data-has-start-content：當日期輸入具有起始內容時。基於 startContent 屬性。
• data-has-end-content：當日期輸入具有結束內容時。基於 endContent 屬性。

協助工具

• 使用原生 <input> 元素建構。
• 視覺和 ARIA 標籤支援。
• 變更、剪貼簿、組合、選取和輸入事件支援。
• 透過 ARIA 向輔助技術公開必填和無效狀態。
• 支援透過 ARIA 連結至輸入框的描述和錯誤訊息輔助文字。
• 每個日期和時間單位都顯示為可單獨聚焦和編輯的區段，讓使用者可以使用鍵盤，以任何日期格式和地區設定輕鬆編輯日期。
• 日期區段可以使用易於使用的數字鍵盤編輯，並且所有互動都可以使用基於觸控的螢幕閱讀器存取。

API

DateInput 屬性

DateInput 事件