今日、後輩君に質問されたので備忘録もかねてまとめ。
タイトル通り、TIME 型のデータを、JavaScript の Date オブジェクトに変換する方法についてです。
Material UI の <KeyboardDatePicker> を使用する際、初期値をデータベースから取得した TIME 型のデータを指定するようにしたかったらしいのですが、そこで躓いてしまったとのことでした。
なお、Material UI の <KeyboardDatePicker> についてはこちらから。
Date picker, Time picker React components – Material-UI
https://material-ui.com/components/pickers/
まず、<KeyboardDatePicker> に指定する value は Date オブジェクトである必要があるため、JavaScript の new Date() を使って生成します。
new Date() は引数になにも指定しない場合は、現在の日付で Date オブジェクトが生成されますが、今回はそれでは駄目なので、下記のように指定します。
import moment from 'moment';
const date = 'データベースから取得した TIME 型のデータ';
const result = new Date(`${moment().format(`YYYY/MM/DD`)} ${date}`);
今回は時刻が合っていれば OK なので、日付の部分はとりあえず今日を取得しています。
で、今日の日付と、データベースから取得した TIME 型のデータを文字列結合し、それを new Date() の引数に渡しています。
あとはこの値を state で管理するようにして、<KeyboardDatePicker> の value に渡してあげれば、初期値はデータベースから取得した時刻が指定されているはずです。
追加するコードは以上です！
正直、まとめるまでもないかと思ったのですが、今回こうして質問されたし、私自身も開発している別のプロジェクトで使ったし、記事にしてみました。
覚えてしまえば別になんてことないコードですが、確かに初心者の方には難しいかもしれませんね。
以上、JavaScript で TIME 型のデータを Date オブジェクトに変換する方法についてでした。
ご参考になれば幸いです。
