跳到主要內容
+

自訂欄位

日期和時間選擇器讓您透過傳遞 props 或自訂元件來自訂欄位。

自訂預設欄位

自訂 TextField

您可以使用 textField slot 將自訂 props 傳遞到 TextField

請填寫此欄位

按下 Enter 鍵開始編輯

自訂多輸入範圍欄位的分隔符號

您可以使用 fieldSeparator slot 將自訂 props 傳遞到兩個 TextField 之間呈現的 Typography

–

–

按下 Enter 鍵開始編輯

不同地自訂 start 和 end 欄位

您可以將條件式 props 傳遞到 textField slot，以根據 position 自訂輸入樣式。

–

按下 Enter 鍵開始編輯

在範圍選擇器上使用單一輸入欄位

您可以將單一輸入欄位傳遞到範圍選擇器，以用於鍵盤編輯

按下 Enter 鍵開始編輯

如果您想在欄位周圍建立包裝函式，請確保將 fieldType 靜態屬性設定為 'single-input'。否則，選擇器將不知道您的欄位是單一輸入欄位，並使用多輸入事件監聽器

如果您希望您的範圍選擇器看起來與簡單選擇器完全相同，您可以手動新增 endAdornment

按下 Enter 鍵開始編輯

變更範圍欄位的分隔符號

您可以使用 dateSeparator prop 來變更開始和結束日期之間呈現的分隔符號

至

按下 Enter 鍵開始編輯

變更格式密度

您可以使用 formatDensity prop 控制欄位格式間距。將 formatDensity 設定為 "spacious" 將在每個 /、- 和 . 字元前後新增空格。

按下 Enter 鍵開始編輯

與 Material UI 一起使用

使用 Material TextField

您可以匯入 TextField 元件以建立自訂包裝函式

按下 Enter 鍵開始編輯

使用 Material PickersTextField

將 enableAccessibleFieldDOMStructure 傳遞到任何 Field 或 Picker 元件，以啟用無障礙 DOM 結構

MM/DD/YYYY
MM/DD/YYYY
按下 Enter 鍵開始編輯

您可以匯入 PickersTextField 元件以建立自訂包裝函式

MM/DD/YYYY
MM/DD/YYYY
按下 Enter 鍵開始編輯

與 Joy UI 一起使用

使用 Joy Input

您可以使用 Joy UI 元件來取代 Material UI 元件

—

使用 Joy PickersTextField

與未樣式化的輸入一起使用

使用瀏覽器輸入

—

使用自訂 PickersTextField

MM/DD/YYYY
MM/DD/YYYY – MM/DD/YYYY
MM/DD/YYYY
—
MM/DD/YYYY

與其他 UI 一起使用

使用 Autocomplete

如果您的使用者只能在可用日期的小列表中選擇值，您可以將欄位替換為列出這些日期的 Autocomplete

使用唯讀 TextField

如果您希望使用者完全透過檢視畫面選擇值，但您仍然希望 UI 看起來像 TextField，您可以將欄位替換為唯讀 TextField

使用 Button

如果您希望使用者完全透過檢視畫面選擇值，並且您不希望 UI 看起來像 TextField，您可以將欄位替換為 Button

同樣的方法可以應用於 DateRangePicker

如何建立自訂欄位

建立自訂欄位時的主要挑戰是確保正確處理選擇器傳遞的所有相關 props。

在以下範例中，您可以看到自訂欄位接收的 props 的類型始終具有相同的形狀

interface JoyDateFieldProps
  extends UseDateFieldProps<Dayjs, false>, // The headless field props
    BaseSingleInputFieldProps<
      Dayjs | null,
      Dayjs,
      FieldSection,
      false, // `true` for `enableAccessibleFieldDOMStructure`
      DateValidationError
    > {} // The DOM field props

interface JoyDateTimeFieldProps
  extends UseDateTimeFieldProps<Dayjs, false>, // The headless field props
    BaseSingleInputFieldProps<
      Dayjs | null,
      Dayjs,
      FieldSection,
      false, // `true` for `enableAccessibleFieldDOMStructure`
      DateTimeValidationError
    > {} // The DOM field props

無頭欄位 props

此介面取決於您正在建立的欄位類型（日期欄位的 UseDateField、時間欄位的 UseTimeField、日期範圍欄位的 UseDateRangeFieldProps 等）。

它包含

  • 所有欄位通用的基本 props（value、onChange、format、readOnly 等）
  • 此類型欄位的驗證 props（minDate、maxDate、shouldDisableDate 等）

DOM 欄位 props

此介面包含選擇器傳遞到其欄位的 props，以便自訂呈現。

這些 props 的形狀旨在由使用來自 @mui/material 的 TextField 的內建欄位接收。當與另一種類型的輸入（或完全沒有輸入）一起使用時，您將必須手動將它們傳遞到相關的元件。

您可以查看 BaseSingleInputFieldProps 和 BaseMultiInputFieldProps 介面，以確切了解這些介面包含的內容。

API

請參閱以下文件，以取得此處提及的元件可用的所有 props 和類別的完整參考。