日期欄位

日期欄位元件讓使用者可以使用鍵盤選擇日期。

基本用法

基本日期欄位

<DateField label="Basic date field" />

<DateField label="Basic date field" />

按下 Enter 鍵開始編輯

非受控值 vs. 受控值

元件的值可以是未受控或受控的。

非受控欄位

受控欄位

<DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-17')} />
<DateField
  label="Controlled field"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

<DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-17')} />
<DateField
  label="Controlled field"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

按下 Enter 鍵開始編輯

本地化

請參閱日期格式和本地化以及翻譯元件文件頁面以了解更多詳細資訊。

自訂日期格式

破折號分隔符

完整字母月份

<DateField
  label="Dash separator"
  defaultValue={dayjs('2022-04-17')}
  format="MM-DD-YYYY"
/>
<DateField
  label="Full letter month"
  defaultValue={dayjs('2022-04-17')}
  format="LL"
/>

<DateField
  label="Dash separator"
  defaultValue={dayjs('2022-04-17')}
  format="MM-DD-YYYY"
/>
<DateField
  label="Full letter month"
  defaultValue={dayjs('2022-04-17')}
  format="LL"
/>

按下 Enter 鍵開始編輯

驗證

請參閱驗證文件頁面以了解更多詳細資訊。

API

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

<DateField />