<input type="date"> 日付の入力欄を作成する

HTMLの<input type="date">は、日付の入力欄(フィールド)を作成するために使います。具体的には「年」「月」「日」の3つの値を入力するフィールドが作られます。

<input type="date" name="birthday">

input type="date"の操作イメージ

対応しているブラウザであれば、このようにブラウザ独自のUI(ユーザー・インターフェース)で日付を選ぶことができます。

ブラウザごとの表示イメージ

注意したいのは、ブラウザやOSごとにUIが大きく異なることです。

👇以下で紹介するピッカーUIのスクショは、OSやブラウザのバージョンにより表示が異なることがあります。

Chromeのinput type="date"の表示イメージ

例えば、Google Chrome 💻ではこのようにカレンダー形式で表示されます。キーボードで直接日付を入力することもできます。

Firefoxのinput type="date"の表示イメージ

Firefox 💻でも同じくカレンダー形式ですが、Chromeとはデザインが違うことがわかると思います。

iOSのinput type="date"の表示イメージ

iOS📱だと回転させながら選ぶようなピッカーが表示されます。

未対応ブラウザの場合

<input type="date">未対応のブラウザだと、ただの文字列の入力欄(<input type="text">と同じ)になります。

Internet Explorerでの表示

CSSでカスタマイズするのはおすすめしません

ブラウザの日付選択UIは、CSSで部分的にカスタマイズすることも可能ですが、以下の理由からあまりおすすめしません。

  • カスタマイズできる範囲がごくわずか
  • 複数のブラウザ対応を考慮しながらCSSを追加するのが難しい
  • 気づかないうちにユーザー体験が低下する可能性がある

デザインを変えたい場合はライブラリを使おう

もし、どのブラウザでも統一したデザインで表示したい場合は日付選択のライブラリを使うのが良いでしょう。ライブラリを使えば、<input type="date">に未対応のブラウザ対策も可能になります。

😺英語では「React date picker」や「jQuery date picker」のように「date picker」というキーワードを使って検索すると見つけやすいでしょう。

input type="date"の使い方

基本

<form>
  <label for="birthday">誕生日を入力</label>
  <input type="date" name="birthday" id="birthday">
  <button type="submit">送信</button>
</form>

👆フィールドの名前はname属性で指定します。この場合name="birthday"なので、フォーム送信時にはbirthday=フィールドの値という形でサーバーに送られます。

<label for="◯◯"><input id="◯◯">を合わせることで、ラベル(<label>)の文字列をクリックしたときにもフィールドにカーソルが当たるようになります。

このあたりの使い方は、他の<input>と同じです。

日付の値はどんな形式になってる?

<input type="date">フィールドに入力された値はYYYY-MM-DDという形式の文字列になっています。具体的には2021-02-13のような形ですね。

✍️メモ

  • フィールドの見た目が「2021/02/13」となっていても、値を取り出すときやサーバーに送るときには「2021-02-13」となります。
  • <input type="date">に未対応のブラウザでは日付形式のチェックはされません。値はユーザーが入力した通りの文字列になります。

value属性で初期値を指定する

<input type="date" value="2025-04-01">

👆日付フィールドにあらかじめ初期値(デフォルト値)を入力しておきたいときは、value="YYYY-MM-DD"を指定します。

デフォルトの日付を今日にする

単純にvalue="今日の日付"となるようにします。例えば、PHPなら<input type="date" value="<?php echo date('Y-m-d'); ?>">とすれば良いでしょう。

minとmaxで選択可能な日付の範囲を決める

min属性とmax属性を使うと、選択できる日付の範囲を指定できます。

<input type="date" min="2020-04-01" max="2020-04-07">

👆min="2020-04-01"は「2020年4月1日から」、max="2020-04-07"は「2020年4月7日まで」という意味になります。つまり「4/1〜4/7」の中から選んでもらうことになります。

😺ChromeやFirefoxなどの日付ピッカーでは、範囲外の日付は選択できないようにしてくれます。

YYYY-MM-DD以外の形式だと効かない

たとえばmin="2020/04/01"min="04-01"のように指定しても無効になるので注意しましょう。

stepで選択可能な曜日を制限する

少し分かりづらいのですが、step="数字"により選択できる日付を制限できます。

input type="date"にstep属性を指定したとき

例えばstep="7"にすると、7日ごとに選択ができるようになります。この画像だと、木曜日だけが選択できることが分かります。
(他の曜日はグレーになっていて選べません)

特定の曜日だけ選べるようにする

step属性は、デフォルト値を決めるvalue属性と合わせて指定すると効果的です。例えばvalue="2020-04-01"(水曜日)、step="7"(1週間おき)とした場合、デフォルト値が基準になり「水曜日」のみが選べることになります。

input type="date"のstep属性はエラーチェックまでしてくれる

他の曜日を入力してフォームを送信しようとすると、対応ブラウザではエラーを表示してくれます。

<form>
  <input type="date" value="2020-04-01" step="7">
  <button type="submit">送信</button>
</form>

水曜日だけを選べる。他の曜日だとエラーに

ただし、これらのエラーチェックはあくまでもブラウザ上だけのものです。重要な日付ならサーバー側でも日付が有効かチェックするようにしましょう。

requiredで入力必須にする

<form>
  <input type="date" name="example" required>
  <button type="submit">送信</button>
</form>

空欄のまま送信するとエラーに

👆フィールドを必須入力にしたい場合は、required属性を指定しましょう。このようにrequiredとだけ書けばOKです。

requiredの注意点

  • ブラウザのバリデーションを有効にするためには<form>の中に<input>と送信ボタンを入れる必要があります。
  • あくまでもブラウザ上でのバリデーションです。少し詳しい人がやろうと思えばrequiredがついていても空欄で送ることができてしまうので注意しましょう。
  • エラーメッセージ(このフィールドを入力してください等)の表示のされ方はブラウザによって違いがあります。文言やスタイルを変えたい場合は、JavaScriptを使って自分でバリデーションを作るのが良いでしょう。

その他の種類の<input>の使い方はこちらのページをご覧ください。

ブラウザ対応状況

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    25〜
  • Safariのアイコン
    Safari
    16.3で部分的に対応
  • Firefoxのアイコン
    Firefox
    109で部分的に対応
  • Edgeのアイコン
    Edge
    13〜
  • IEのアイコン
    IE
    未対応

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    108〜
  • iOS Safariのアイコン
    iOS Safari
    16.3で部分的に対応

caniuse.comで詳しく見る