フォームにカレンダー入力を追加する方法！日付選択を簡単にする

フォームに日付入力フィールドを追加する際、ユーザーが手動で日付を入力するよりも、カレンダーから簡単に選択できる方が利便性が高くなります。
特に、予約フォームや誕生日入力欄、イベントのスケジュール登録など、日付を扱う場面では、カレンダー入力機能を導入することで、正確かつ素早く日付を指定できるため、UX（ユーザーエクスペリエンス）の向上に繋がります。

本記事ではコーディングする際に、HTML5で簡単にカレンダー入力を追加する方法から、JavaScriptを使ってカスタマイズする高度な方法、さらにはユーザビリティを向上させるためのポイントまで、具体的な実装手順を解説します。

HTML5で基本のカレンダー入力

HTML5では、日付入力用の専用フィールドを簡単に作成できます。
この方法は最も手軽で、標準のブラウザが提供するカレンダー機能を利用するため、クロスブラウザ対応も比較的簡単です。

■基本的なコード例
以下のコードを見てください。HTML5の<input type="date">を使用すると、ユーザーがカレンダーから日付を選択できる入力フィールドが生成されます。

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

これにより、ブラウザが自動的に日付入力専用のUIを生成し、ユーザーがポップアップカレンダーを使って日付を選択できるようになります。
非常にシンプルな実装ですが、多くのケースでこれだけでも十分に機能します。

■<input type=”date”>サポート状況
ただし、すべてのブラウザがこのタグを完全にサポートしているわけではありません。
最新のブラウザでは問題なく動作しますが、古いバージョンのインターネットエクスプローラー（IE11以前）や一部のモバイルブラウザではサポートされていません。このような場合には、ポリフィル（JavaScriptによる機能の補完）を利用して対応することができます。

JavaScriptライブラリの利用で高度なカレンダー入力

HTML5の<input type="date">タグがサポートされていない環境や、カレンダーUIのデザインや動作をカスタマイズしたい場合には、JavaScriptライブラリを活用するのがおすすめです。
特に有名なライブラリとして、以下の2つが挙げられます。

Flatpickr
jQuery UI Datepicker

Flatpickrを使った実装

Flatpickrは軽量で高機能なカレンダー入力ライブラリで、シンプルな日付選択はもちろん、幅広いカスタマイズが可能です。
まず、Flatpickrをプロジェクトに導入するためには、以下のCDNリンクをHTMLに追加します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

次に、カレンダー入力フィールドに対してFlatpickrを初期化します。

<input type="text" id="date-picker" placeholder="日付を選択してください">

<script>
  flatpickr("#date-picker", {
    dateFormat: "Y-m-d",
  });
</script>

上記のコードでは、日付を「年-月-日」の形式で選択できるカレンダーが表示されます。
また、Flatpickrはさまざまなオプションを提供しており、特定の範囲の日付を無効化することもできます。

jQuery UI Datepickerを使った実装

もう一つの人気ライブラリとして、jQuery UI Datepickerがあります。jQueryをベースにしたこのライブラリは、長年にわたって広く使われてきた実績があり、多機能で安定しています。

以下のように、jQuery UIを導入し、Datepickerを設定することができます。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="datepicker">

<script>
  $( "#datepicker" ).datepicker();
</script>

jQuery UI Datepickerは、Flatpickrと同様に豊富なオプションを持ち、UIのカスタマイズやローカライズ（日本語対応など）も簡単です。

カレンダー入力のUI/UX向上ポイント

カレンダー入力機能をフォームに追加する際には、いくつかのポイントを押さえることで、より使いやすいフォームを作成できます。

モバイルフレンドリーなデザイン

モバイルデバイスでは、画面が小さいため、カレンダー入力UIのデザインに工夫が必要です。
例えば、Flatpickrでは、CSSでタップしやすいボタンサイズに変更することが可能です。

.flatpickr-calendar {
  font-size: 16px;
}

.flatpickr-day, .flatpickr-month, .flatpickr-year {
  padding: 10px;
}

このように、カレンダーのフォントサイズを大きくすることで、モバイルユーザーにとっても操作しやすいUIを提供できます。

日付範囲の設定

ユーザーが誤って過去の日付や未来の無効な日付を選択しないように、日付の範囲を設定することが重要です。例えば、予約システムでは、今日以降の日付しか選択できないように設定することで、無効な入力を防ぐことができます。

Flatpickrでは、以下のように日付範囲を指定できます。

flatpickr("#date-picker", {
  minDate: "today",
  maxDate: new Date().fp_incr(30) // 今日から30日以内
});

この設定により、ユーザーは今日から30日以内の未来の日付のみを選択できるようになります。

フォーム作成ツールを利用すると簡単

イチからHTMLとCSSとJavaScriptでコーディングするのは少し面倒です。
フォーム作成ツールの「フォームメーラー」を利用すれば、簡単に日付のカレンダー入力を実現したフォームを作成できます。
ノーコードのクリック操作のみでフォームを簡単に作成できるツールで、無料から導入可能。
「日付範囲の設定」はもちろん、「選択不可にする曜日の設定」や「祝日だけを選択不可にする設定」もクリック操作だけで簡単にできます。
ぜひ一度、フォームメーラーでフォームを作成してみてください。