属性値

属性名 説明
date 日付の入力欄を作成
datetime タイムゾーンutcの日付の入力欄を作成
datetime-local ローカル日付の入力欄を作成

内容詳細

type属性の値がdate/datetime/datetime-localの場合は、日付を入力するための入力欄を生成します。

入力欄には日付のみ入力できます。Operaの場合は、入力時に日付選択のUIが表示されます。

それぞれの入力ボックスの違いは、日付フォーマットの違いです。

以下のテーブルでまとめてみました。

 
type属性の値 フォーマット具体的な値
date yyyy-MM-dd 2012-02-01
datetime yyyy-MM-ddTHH:mm:ssZ 2012-02-01T07:03:10Z
datetime-local yyyy-MM-ddTHH:mm:ss 2012-02-01T16:30:10

min/max属性で選択できる日付の範囲、step属性で〇日おきという増/減分の指定ができます。指定した範囲内で日付を選択させたい場合に利用します。

書式

<input type="date">
<input type="datetime">
<input type="datetime-local">

サポートブラウザー

属性名
date 20.0 12.0 57.0 X 10.1
datetime 20.0 12.0 57.0 X 10.1
url 20.0 13.0 X X 10.1

サンプル

ソースコード

<form id="myform" name="myform" 
style="background-color: #f1f1f1; border: 1px solid #d4d4d4;" action="">
<p>date : <input type="date" name="date" min="2011-10-01" max="2011-12-31" step="1"></p>
<p><input type="submit" value="送信"></p>
</form>

実行結果

date :

HTML5開発-レファランス

プログラミングメイン