TypeScriptでMaterial UIのTextFieldのdatetime-localタイプに初期値を設定する方法

目次

はじめに

本記事は、Material UIのライブラリの「TextField」に関する記事です。

mui.com

TextFieldのdatetime-localタイプに初期値を設定する方法

以下のように「defaultValue」に「YYYY-MM-DDTHH:MM」のフォーマットの日時を渡すことで、初期値を表示する事が可能です。

<TextField 
    type="datetime-local"
    defaultValue="2022-01-01T10:10"
/>

日付のフォーマットを変換

「YYYY/MM/DD HH:MM」のフォーマットを「YYYY-MM-DDTHH:MM」に変換させるには、Date型を経由するのがベストですが、サンプル作成などで面倒な場合には、以下の様に文字列置換で変換することも可能です。

const convertFormatForDateField = (date: string) => {
  return date.replaceAll('/', '-').replaceAll(' ', 'T');
};