fujjima’s blog

主に備忘録

Material-UIのTextFieldをtype="date"にした際のdefaultValueに指定する日付のフォーマットについて備忘録

material-uiのTextFiledというAPIの中で、type="date"のようにタイプを指定することでDate pickerのように使用することができる。

Date picker, Time picker React components - Material-UI

その際、デフォルトの日付をdefaultValueというオプションで設定できるが、この部分で少し詰まったので備忘録として残す。

ダメだった例

// 年、月、日の区切りがスラッシュになっているとdefaultValueとして認識されない
const today = dayjs().format('YYYY/MM/DD')

<TextField
  label="testDay"
  type="date"
  defaultValue={today}
  margin="normal"
/>

f:id:fujjima:20210101144435p:plain

良かった例

// 年、月、日の区切りがハイフンだときちんとdefaultValueとして指定できる
const today = dayjs().format('YYYY-MM-DD')

<TextField
  label="testDay"
  type="date"
  defaultValue={today}
  margin="normal"
/>

f:id:fujjima:20210101144333p:plain

詳細は調査中だが、同じようにdatapickerとして使用できるKeyboardDatePickerではformatにformat="MM/dd/yyyy"のように指定してもいける感じなので、どうしてこのような仕様にしているかはよく分からない。 しかも表示される時にはYYYY/MM/DD形式だし。スラッシュどこに行った。

https://material-ui.com/components/pickers/#material-ui-pickers