JavaScript (React) で <input type="datetime-local" />
の値を設定するメモ
datetime-local の value は yyyy-MM-ddThh:mm
の形で指定する
表示される日付と時刻の書式は実際の
value
とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーのロケールによって書式化されますが、日付や時刻の value は常にyyyy-MM-ddThh:mm
の書式です。
cf. <input type="datetime-local"> - HTML: HyperText Markup Language | MDN
e.g. React で扱う例
import dayjs from 'dayjs'; import { useState } from 'react'; const initialDateTime = "2021-04-19 12:00"; const formatDateTimeLocal = (datetimeStr) => { return dayjs(datetimeStr).format('YYYY-MM-DDTHH:mm'); }; const DatetimeInput = ({ initialDateTime }) => { const [datetime, setDateTime] = useState( formatDateTimeLocal(initialDateTime) ); const onChangeHandler = (evt) => { setDateTime(evt.currentTarget.value); }; return ( <input type="datetime-local" value={datetime} onChange={onChangeHandler} /> ); };
日付と時間の間にある T
を入れ忘れる <input type="datetime-local" />
の value が空になる
const initialDateTime = "2021-04-19 12:00"; const DatetimeInput = ({ initialDateTime }) => { const [datetime, setDateTime] = useState(initialDateTime); const onChangeHandler = (evt) => { setDateTime(evt.currentTarget.value); }; return ( <input type="datetime-local" value={datetime} onChange={onChangeHandler} /> ); };
=> 初期値が空になり反映されない。React のエラーも出ないので気づきにくい。
サンプル
See the Pen datetime-local react by KIKIKI (@kikiki_kiki) on CodePen.
所管
datetime-local
の value のフォーマットが合って無くても React ではエラーも警告も出ず、value が空文字になっていてミスが有るのに気づきにくかったです。
JavaScript で直接 DOM に設定しようとすると警告が出るっぽいです。(調べてない)
timezone の調整の仕方がまだよく分かってないので、気が向いたら調べたい。
昔は type="datetime"
だったよな〜って思ったらこっちは廃止になってて、代わりに type="datetime-local"
を使ってね。※ 但し対応ブラウザ (ry になってたのですね。
HTML の
<input type="datetime">
は日付と時刻 (時、分、秒と小数点以下の秒) に加えてタイムゾーンを入力するコントロールでした。この機能は WHATWG HTML 仕様書 から削除され、もうブラウザーでは対応されていません。
代わりに、ブラウザーは<input type="datetime-local">
を実装して (かつ開発者に使用を推奨して) います。
cf. <input type="datetime"> - HTML: HyperText Markup Language | MDN
ちゃんとキャッチアップしていかないと…ってお気持ちになりました。
[参考]
- <input type="datetime-local"> - HTML: HyperText Markup Language | MDN
- <input type="datetime"> - HTML: HyperText Markup Language | MDN
- HTML5 <input type="datetime-local"> に現在時刻を設定するには - Qiita