HTML5 <input type="datetime-local"> に現在時刻を設定するには

日付と時刻を設定できるブラウザーネイティブなフォーム<input　type="datetime-local">を便利に使う方法をご紹介します。CodePenでデモを作りました。カレンダーアイコンをクリックすると、日付や時刻を設定できます。

See the Pen HTML5 input datetime-local by Hirokazu Takatama (@takatama) on CodePen.

このデモでは、Webページを開いたときに現在時刻を設定しています。ソースコードはStackoverflowに掲載しています。

HTMLにはid="cal"の<input>を配置します。

<input type="datetime-local" id="cal">

JavaScriptでは<input>のvalueに時刻の文字列をyyyy-MM-ddThh:mmの形式で設定します。

function toLocalISOString(date) {
  const localDate = new Date(date - date.getTimezoneOffset() * 60000); //offset in milliseconds. Credit https://stackoverflow.com/questions/10830357/javascript-toisostring-ignores-timezone-offset

  // Optionally remove second/millisecond if needed
  localDate.setSeconds(null);
  localDate.setMilliseconds(null);
  return localDate.toISOString().slice(0, -1);
}

window.addEventListener("load", () => {
  document.getElementById("cal").value = toLocalISOString(new Date());
});

<input>に設定する文字列はtoISOString().slice(0, -1)で最後のZを消すことで生成できるのですが、UTC が返るためタイムゾーンを考慮する必要があります。そこでgetTimezoneOffset()のずらしますが、分からミリ秒に変換しています。

その後、setSeconds(null)とすれば秒を、setMilliseconds(null)とすればミリ秒をフォームに出力しないように設定できます。

なお、valueに設定できる文字列は、次の形式のいずれかです。

• yyyy-MM-ddThh:mm
• yyyy-MM-ddThh:mm:ss
• yyyy-MM-ddThh:mm:ss.SSS

この形式に従わないものを設定しようとすると、開発者コンソールに次のエラーが表示されます。

The specified value "XXX" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".

仕様はこちらです。