Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

HTML5新要素 input type="datetime" カレンダーUIで日時の入力

html5

概要

input type="datetime"タグについて説明します。

内容

input type="datetime"は UTC（協定世界時）による日付入力欄です。

書式はYYYY-MM-DDThh:mm:ssTZDです

YYYY	年
MM	月（01〜12）
DD	日（01〜31）
T	ここから時間が始まることを表す文字（大文字のT）
hh	時（00〜23）
mm	分（00〜59）
ss	秒（00〜59）
TZD	タイムゾーン（Z or +hh:mm or -hh:mmであらわす）
Z …… UTCそのものであることを表す文字（大文字のZ）
+hh:mm …… UTCよりローカル時刻が進んでいる場合
-hh:mm …… UTCよりローカル時刻が遅れている場合

※日本の場合は9時間遅れなので+09:00

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>input type="datetime"</title>
  </head>
  <body>
  <form action="">
    datetime：<input type="datetime" name="datetime" id="datetime" value="" max="2014-02-24T20:40:00+09:00" min="2011-08-24T22:40:00+09:00" style="width:200px;" required /><br />
    <input type="submit" name="" value="submit" />
  </form>
  </body>
</html>

完成画面のキャプチャ

現状だと、Opera以外はテキストボックスと変わらない表示なのでOperaのキャプチャです。

日付のダイアログが表示され、minに設定した日付以前はdisabledになっている

選択後、値が反映される