<input type="datetime">
更新日 | |
---|---|
仕様 | 未定義 |
分類 |
|
利用場所 |
|
内容 |
|
★この属性値(datetime
)は廃止されました★ 参考情報としてこのページはしばらく残しておきます。
input要素に type="datetime"
を指定すると、UTC(協定世界時)による日時の入力欄を作成できます。
<input type="datetime" name="example1">
<input type="datetime" name="example2" value="2012-05-21T20:40+09:00">
属性 | 値 | ||
---|---|---|---|
任意属性(共通) | |||
type="" |
部品のタイプ | datetime |
UTC(協定世界時)による日時の入力欄 |
name="" |
部品の名前 | 文字列 | 部品を識別するための名前 |
value="" |
送信される値 | 日時 | 入力欄の初期値(書式: YYYY-MM-DDThh:mm:ssTZD ) |
disabled |
部品の無効化 | (disabled ) |
値は省略可能 |
form="" |
フォームとの関連付け | ID名 | 関連付けるform要素に指定したID名 |
任意属性(部品タイプに依存) | |||
min="" |
入力できる日時の最小値 | 日時 | 最小値(書式: YYYY-MM-DDThh:mm:ssTZD ) |
max="" |
入力できる日時の最大値 | 日時 | 最大値(書式: YYYY-MM-DDThh:mm:ssTZD ) |
step="" |
入力できる日時のステップ | 秒数 | この値の間隔で入力を可能にする(既定値は 60 ) |
any |
ステップを設定しない |
autocomplete="" |
オートコンプリート | on |
オートコンプリートを有効にする |
off |
オートコンプリートを無効にする | ||
list="" |
入力候補のリスト | ID名 | 関連付けるdatalist要素に指定したID名 |
readonly |
読み取り専用 | (readonly ) |
値は省略可能 |
required |
入力必須 | (required ) |
値は省略可能 |
- 各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています)
このタイプの特徴
UTC(協定世界時)による日時を入力するための入力欄です。
(実際の表示例)
このタイプに対応しているブラウザでは、カレンダーやスピナー(上下ボタン)を使って日時を入力することができます。
- 以前はOperaのみ対応していましたが、現在の対応状況は不明です。
日時の書式
入力する日時、およびvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。
YYYY-MM-DDThh:mm:ssTZD
2012-02-16T20:40:30+09:00
2012-02-16T11:40:30Z
- 年は4桁、月・日と時・分・秒は各2桁で入力します。(時間は24時間表記)
- 年月日と時間を
T
で区切ります。 - 0秒ジャストの場合は秒数(
:ss
)を省略することもできます。 - 小数点以下の秒数も入力することができます。(ピリオド(
.
)に続けて1~3桁で記述します) - 日本時間で入力する場合は、タイムゾーン(
TZD
)の部分に+09:00
を指定します。 - UTC時間で入力する場合は末尾に
Z
を追加します。
例えば、日本時間で次のように指定すると、入力欄には9時間前の日時(UTC時間)が表示されることになります。(対応しているブラウザのみ)
<input type="datetime" name="example" value="2012-02-16T20:40+09:00">
min属性とmax属性について
min属性とmax属性は、入力できる日時の範囲を指定します。(どちらかのみを指定することも可能です)
- min属性 … 入力できる日時の最小値を指定します。
- max属性 … 入力できる日時の最大値を指定します。
次の例では、2012年の日時のみが入力可能となります。
<input type="datetime" name="example" min="2012-01-01T00:00Z" max="2012-12-31T23:59Z">
step属性について
step属性は、入力できる日時のステップ(入力値の間隔)を秒数で指定します。type="datetime"
の場合は 60
秒が既定値となります。
次の例では 300
を指定しているので、5分間隔で入力できることになります。(例:5分、10分、15分 ...)
<input type="datetime" name="example" step="300">
秒間隔で入力を可能にする場合は、次のように 1
などを指定します。(しかし、Opera(11)で確認したところ、入力欄には秒数の桁が表示されないようです)
<input type="datetime" name="example" step="1">
値に any
を指定すると、ステップは設定されません。
<input type="datetime" name="example" step="any">
使用例
<p><input type="datetime" name="example" min="2012-01-01T00:00Z" max="2012-12-31T23:59Z"></p>
- 表示例
- 対応しているブラウザでは、2012年のカレンダーしか選択できなくなります。
<p>デフォルト:<input type="datetime" name="example1"> (1分)</p>
<p>30秒を指定:<input type="datetime" name="example2" step="30"></p>
<p>300秒を指定:<input type="datetime" name="example3" step="300"> (5分)</p>
<p>1800秒を指定:<input type="datetime" name="example4" step="1800"> (30分)</p>
<p>3600秒を指定:<input type="datetime" name="example5" step="3600"> (1時間)</p>
- 表示例
-
デフォルト: (1分)
30秒を指定:
300秒を指定: (5分)
1800秒を指定: (30分)
3600秒を指定: (1時間)
- 時間のスピナーを操作すると、指定した間隔で時間が変化します(対応しているブラウザのみ)。
- 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。
<form method="get" action="input_datetime.html">
<p><input type="datetime" name="example" required> <strong>必須</strong></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
- 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。