HTML

HTML’s input type="date" is a convenient form element that allows users to select a date intuitively using a calendar-like UI and sends it to the server in ISO 8601 format (YYYY-MM-DD).

この記事では、カレンダーから日付を選べる<input type="date">の基本と、送信値の形式や表示が環境によって異なる点を説明します。

<input type="date">

　HTMLの input type="date" は、日付を入力するために特化されたフォーム部品です。HTML5で導入され、ユーザーがカレンダー形式の UIで日付を選択できるようになったため、従来よりも入力の正確性やユーザビリティが向上しました。

基本的な使い方

HTML

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

type="date"を指定すると、対応しているブラウザでは日付入力用の UI（カレンダーなど）が表示されます。
name属性はサーバーに送信される際のフォームの名前になるので、サーバーサイドで値を受け取るときに使用します。
id属性は JavaScriptや CSSなどで利用できる要素の識別子です。

ブラウザによるサポート状況

　input type="date"はモダンブラウザ（Chrome、Firefox、Safari、Microsoft Edgeなど）で広くサポートされています。ただし、モバイルブラウザにおいても、iOSの Safariと Androidの Chromeでは標準でカレンダー入力やスピナーが使えるようになっていますが、古いバージョンの IEなど一部のブラウザではサポートされません。

Data on support for the input-datetime feature across the major browsers from caniuse.com

非対応ブラウザでの挙動

非対応ブラウザでは、type="date"としては認識されず、通常のテキスト入力フィールドとして扱われます。そのため、ユーザーが日付ではない文字列を入力してしまう可能性もある点に注意が必要です。
フォールバック策としては、JavaScriptのライブラリ（たとえば、jQuery UIの Datepickerなど）を利用してカレンダー入力を実装する方法があります。

バリデーション

デフォルトのバリデーション

　HTML5のフォームバリデーション機能を利用すると、以下の条件を簡単に実装できます。

required属性を指定すると、未入力のままではフォームを送信できなくなる。
min属性と max属性で、入力可能な日付の範囲を指定できる。

HTML

<input 
	type="date" 
	name="visit-date"
	required
	min="2025-01-01" 
	max="2025-12-31"
>

　この例では、未入力は禁止、かつ2025年1月1日から2025年12月31日までしか入力できないように設定しています。

バリデーションメッセージ

　ブラウザによってはエラーメッセージが英語で表示されることがあります。ユーザにわかりやすい表示を行いたい場合は、カスタムメッセージや JavaScriptを使ってバリデーションを制御するのが一般的です。

値のフォーマット

　type="date"で送信される値は、標準的には YYYY-MM-DD形式（例：2025-01-10）となります。これは W3Cで定義されている日付形式で、サーバーサイドでも簡単に処理しやすいメリットがあります。ただし、ユーザーインターフェイス上での見え方はブラウザやデバイスの地域設定によって異なります。

たとえば、英語設定のブラウザでは MM/DD/YYYY形式で表示されることがあります。
日本語設定のブラウザでは YYYY/MM/DD形式や YYYY年 MM月 DD日といった形で表示される場合があります。

　しかし送信される値（実際のフォーム送信データ）はあくまで ISO 8601的な形式(YYYY-MM-DD)で統一されるため、サーバー側はそれをパースして処理します。

ユーザビリティ上のメリット

入力ミスを減らす: カレンダーやスピナー形式で指定できるため、テキスト入力で発生しがちな桁数の誤りやフォーマットのズレなどの入力ミスが減ります。
視認性・操作性の向上: スマートフォンなどのモバイル端末では、日付ピッカーが OS固有の UIで表示されるため、ユーザーに馴染みやすく操作しやすいです。
国際化対応: ブラウザが自動的に現地の地域設定を反映するため、ユーザーの文化圏に合わせた日付表記・選択UIを提供できます。

注意点

互換性（フォールバック）: 古いブラウザや特殊環境ではテキスト入力フィールドとして扱われる可能性があるため、入力フォーマットに対する説明や、必要に応じて JavaScriptで日付ピッカーを実装するといった対策が必要です。
バリデーションのローカライズ: ブラウザ標準のエラーメッセージが英語などの場合、ユーザーが誤りを理解しにくいケースがあります。ユーザー体験を向上させるために、独自のバリデーションメッセージを用意することが望ましいです。
サーバーサイドでの再検証: クライアントサイドのバリデーションはユーザーやブラウザの環境によって回避される可能性があるため、サーバー側でも入力内容を再度バリデーションするのが安全です。
フォーマット依存の処理: ブラウザ上では地域設定によって表示形式が異なる一方、実際にサーバーへ送信される日付データはあくまで YYYY-MM-DD形式です。必要に応じてサーバー側で別の表示形式に変換したり、タイムゾーンを考慮したりする必要があります。