HTMLの日付入力フィールドでブラウザの表示形式を検出・取得する方法

はじめに

HTML5の <input type="date"> は、ユーザーのブラウザやOSのロケール設定に応じて、日付が自動的にローカル形式で表示されます。例えば、日本語環境では「2024/01/15」のように表示され、米国の英語環境では「01/15/2024」といった形式になります。

一方で、input要素の value プロパティが返す値は、常にISO 8601形式（YYYY-MM-DD）に固定されています。そのため、「画面に表示されている形式と同じ日付文字列」を取得したい場合には、少し工夫が必要です。

valueAsDate を使った方法

input要素には valueAsDate という便利なプロパティが用意されています。このメソッドは、入力フィールドの現在の値を反映した Date オブジェクトを返します。表示されている値も同じ形式に従います。具体的には以下のように動作させます。

new Date().toISOString().substr( 0, 10 );
new Date().toLocaleDateString();

input.valueAsDate;
input.valueAsDate.toLocaleDateString();

new Date( input.valueAsDate );
new Date( input.valueAsDate ).toISOString().substr( 0, 10 );

コードの解説

• new Date().toISOString().substr(0, 10)：現在の日付をISO形式（YYYY-MM-DD）の文字列として取得します。inputのvalue属性へ値をセットする際に便利です。
• new Date().toLocaleDateString()：ロケールに応じた形式で日付を文字列として取得します。
• input.valueAsDate：入力フィールドの現在の値をDateオブジェクトとして取得します。
• input.valueAsDate.toLocaleDateString()：取得したDateオブジェクトをローカル形式の文字列に変換します。これにより、画面に表示されている形式と同じ日付文字列を得られます。
• new Date(input.valueAsDate)：Dateオブジェクトから新しいDateインスタンスを生成し、日付の加算・比較などの操作が自由に行えます。
• new Date(input.valueAsDate).toISOString().substr(0, 10)：再びISO形式の文字列に変換してサーバー送信などに利用することも可能です。

実装時の注意点

valueAsDate は、入力フィールドが空の場合に null を返します。エラーを防ぐため、実際のコードでは必ずnullチェックを行いましょう。

if ( input.valueAsDate ) {
  const localDate = input.valueAsDate.toLocaleDateString();
}

また、toLocaleDateString() の引数にロケールやオプションを渡せば、出力形式を細かく制御することもできます。

input.valueAsDate.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
// 出力例: 2024/01/15

まとめ

HTMLの日付入力フィールドの表示形式はブラウザのロケール設定に依存しますが、valueAsDate プロパティを使えば値をDateオブジェクトとして取得でき、toLocaleDateString() を組み合わせることで表示中と同じ形式の文字列に変換できます。これにより、ユーザーが目にしている日付形式とアプリケーション内部のデータ処理を柔軟に連携させることができます。