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" />
良かった例
// 年、月、日の区切りがハイフンだときちんとdefaultValueとして指定できる const today = dayjs().format('YYYY-MM-DD') <TextField label="testDay" type="date" defaultValue={today} margin="normal" />
詳細は調査中だが、同じようにdatapickerとして使用できるKeyboardDatePicker
ではformatにformat="MM/dd/yyyy"
のように指定してもいける感じなので、どうしてこのような仕様にしているかはよく分からない。
しかも表示される時にはYYYY/MM/DD
形式だし。スラッシュどこに行った。
https://material-ui.com/components/pickers/#material-ui-pickers