Reactで<input type="datetime-local">のvalueをセットするにはひと工夫必要

ブラウザ実装のデフォルトのdatetime pickerを使いたいなと思ったら、想像以上に情報なくて困ったのでメモ。

実装

あまり装飾せずに、あえて最小構成でコンポーネントを作る。

import moment from 'moment';

const DatetimeComponent = () => {
  const toDatetime = (date: Date) => {
    return moment(date)
      .toISOString(true)
      .substr(0, 16);
  };
  return <input type="datetime-local" defaultValue={toDatetime(new Date())}>
}

一言

toISOStringとかで普通にセットできるようにして欲しい（Reactが悪いわけではなく、HTML仕様がよくない気がしている）

参考