かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScrip HTML5 input type="datetime-local" の値を設定したい

JavaScript (React) で <input type="datetime-local" /> の値を設定するメモ

datetime-local の valueyyyy-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-localvalue のフォーマットが合って無くても 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

ちゃんとキャッチアップしていかないと…ってお気持ちになりました。


[参考]

ウマ娘良かった…実質アイカツ!だったな…