Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

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

概要

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になっている

選択後、値が反映される