HP制作者、Web開発者向けのHTMLタグリファレンス・使用方法・サンプル

<input type="datetime">
「UTC（協定世界時）日時の入力」

<input type="datetime">は、UTC時刻の入力時に使用します。通常の日時（UTC時刻でなく、日本で通常使用している日時）は<input type="datetime-local">を使用します。
※<input type="datetime">は、HTML5勧告版で削除されました。
HTML規格HTML4.01HTML5
使用可否×○
ブラウザIEChromeFirefoxSafari
使用可否×××○

<input type="datetime"> の属性

【構文】
<input type="datetime" value="2014-01-01T10:15:20Z" ・・・>
属性意味値のサンプルなど
name="固有名"入力に付ける固有名"text1"
value="値"初期値の表示
形式：YYYY-MM-DDThh:mmssZ		"2014-04-01T10:05:00Z"
min="数値"入力できる最小日時(YYYY-MM-DDThh:mm:ssZ)
※HTML5で追加		"2014-01-01T02:53:10Z"
max="数値"入力できる最大日時(YYYY-MM-DDThh:mm:ssZ)
※HTML5で追加		"2014-12-31T23:59:59Z"
step="数値"入力の単位（秒数）
※HTML5で追加		"1"(初期値)
disabled入力の無効化"disabled"
readonly読み取り専用"readonly"
form="フォーム名"送信するフォームの関連付け
※HTML5で追加		"form01"
autofocusフォーカス（カーソル）を設定
※HTML5で追加		"autofocus"
placeholder="テキスト"入力ヒントの表示
※HTML5で追加		"入力してください"
required入力を必須とする
※HTML5で追加		"required"
list="ID名"入力候補のリスト指定
※HTML5で追加		"id01"
autocomplete="on","off"オートコンプリート機能の使用有無
※HTML5で追加
値意味
on使用する
off使用しない
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性

<input type="datetime">のサンプル

<input type="datetime" name="num01">

ブラウザによっては、スピンボタンが表示され、上下に選択可能となります。
一部のブラウザで、送信(SUBMIT)時に数値チェックが行われます。
※非対応のブラウザもあるので注意が必要

ブラウザによって表示が異なります
ブラウザUTC（協定世界時）日時の入力支援入力チェック
IE11

通常のテキストボックスで表示される

入力チェックは行われない。
文字やあり得ない日時でも送信される

Chrome32

通常のテキストボックスで表示される

入力チェックは行われない。
文字やあり得ない日時でも送信される

Firefox27

通常のテキストボックスで表示される

入力チェックは行われない。
文字やあり得ない日時でも送信される

Safari5.1

スピンボタンが表示され、選択により
入力ができる。
ただし、枠幅の調整を行わないと時間
部分が切れてしまう。

入力チェックは行われない。
文字やあり得ない日時でも送信される

初期値の指定【value,min,max,step】

<input type="datetime" name="num01" value="2014-04-01T00:00:00Z" min="2010-01-01T00:00:00Z" max="2014-12-31T23:59:59Z" step="1">

ブラウザによっては、スピンボタンが表示され、上下に選択可能となります。
一部のブラウザで、送信(SUBMIT)時に数値チェックが行われます。
※非対応のブラウザもあるので注意が必要

入力の無効化【disabled】

<input type="datetime" name="num01" value="2014-01-01T00:00:00Z" disabled>

読み取り専用【readonly】

<input type="datetime" name="num01" value="2014-01-01T00:00:00Z" readonly>

入力必須【required】

<input type="datetime" name="num01" required>

送信(SUBMIT)時に入力必須チェックが行われます。
※非対応のブラウザもあるので注意が必要

ブラウザによって表示が異なります
IE11
Chrome32
Firefox27
Safari5.1

オートコンプリートの使用有無【autocomplete】

<input type="datetime" name="num01" autocomplete="off">

<input type="datetime">のスタイルシートサンプル

<style type="text/css">
<!--
.inputSample {
width:200px;
font-size: 20pt;
padding: 5px;
background-color: #ccffff;
border: 3px inset #00ccff;
-->
</style>
<input type="datetime" name="num01" placeholder="入力してください" class="inputSample">

スタイルシートを使用することで、色々な入力が可能となります。

留意事項

  • <input type="datetime">はHTML5で追加ました。このため、対応していないブラウザも多く執筆時点ではJavaScriptなどで同等機能を実現することが推奨されます。ただし、今後ブラウザのバージョンアップが行われ一般に浸透すれば有効なTYPEとなります。

関連するHTMLタグ

<form>入力フォーム域の定義
フォーム内に定義されたinputタグ情報が送信される
<select>セレクトボックス
<textarea>複数行テキスト入力
<input type="text">1行テキスト入力
<input type="password">パスワード入力
<input type="hidden">非表示
<input type="checkbox">チェックボックス
<input type="radio">ラジオボタン
<input type="file">ファイルのアップロード
<input type="submit">formデータの送信ボタン
<input type="image">画像を使用したボタン
<input type="reset">from内の入力内容リセットボタン
<input type="button">一般ボタン
<input type="email">メールアドレス入力
<input type="url">URL入力
<input type="search">検索文字入力
<input type="tel">電話番号入力
<input type="number">数値入力（スピンボタン入力）
<input type="date">日付入力（スピンボタン入力）
<input type="datetime-local">日時入力（スピンボタン入力）
<input type="month">年月入力（スピンボタン入力）
<input type="week">週（年の何週目）入力（スピンボタン入力）
<input type="time">時刻入力（スピンボタン入力）
<input type="range">数値の範囲選択（スライダ選択）
<input type="color">色・カラーの範囲選択（カラーパレット選択）
cman.jp>WEBページ作成TOP>HTMLタグ・リファレンス><input type="datetime"> 「UTC（協定世界時）日時の入力」