浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】TIME型の値をDateオブジェクトに変換する

今日、後輩君に質問されたので備忘録もかねてまとめ。
タイトル通り、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 オブジェクトに変換する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)