Webページで日付を入力する場面は、予約フォームやスケジュール調整、誕生日の登録など、さまざまなシーンで登場します。そんなときに便利なのが「日付ピッカー（日付選択ウィジェット）」です。ユーザーがカレンダーから簡単に日付を選べるUIで、入力ミスを減らし、操作性を高める効果があります。この記事では、HTMLで使える基本的な日付ピッカーの使い方から、jQuery UIやFlatpickrなどのカスタマイズ可能なライブラリまで、Web開発で役立つ日付ピッカーの知識をわかりやすく解説します。
HTML5では、フォームに簡単に日付ピッカーを導入することができます。<input type="date">タグを使えば、モダンブラウザであれば自動的にカレンダーUIが表示され、日付選択が可能になります。
<label for="birthday">誕生日を入力してください:</label>
<input type="date" id="birthday" name="birthday">
このように記述するだけで、ユーザーはカレンダーから直感的に日付を選べるようになります。
ただし、ブラウザによって見た目や機能に違いがあるため、デザインにこだわりたい場合や複雑な設定をしたい場合は、JavaScriptのライブラリを利用するのが一般的です。
こうした理由から、特定の表示や操作性を求める場合は、JavaScriptライブラリを使って日付ピッカーを実装するのがベストです。
jQuery UIには、便利な日付ピッカー機能（Datepicker）が用意されています。日本語対応やフォーマット変更などのカスタマイズも豊富です。
まず、jQueryとjQuery UIをCDNで読み込みます。
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/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.13.2/jquery-ui.min.js"></script>
次に、HTMLとJavaScriptのコードです。
<input type="text" id="datepicker">
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd"
});
});
</script>
<script>
$(function() {
$.datepicker.setDefaults($.datepicker.regional["ja"]);
$("#datepicker").datepicker({
dateFormat: "yy年mm月dd日"
});
});
</script>
これにより、和暦形式や日本語の曜日表示にも対応可能です。
最近のWeb開発では、Flatpickrという軽量で使いやすい日付ピッカーも人気です。見た目もスタイリッシュで、モバイルでも快適に使えます。
<!-- CSSとJSの読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- HTMLとJS -->
<input type="text" id="calendar">
<script>
flatpickr("#calendar", {
dateFormat: "Y-m-d"
});
</script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
<script>
flatpickr("#calendar", {
locale: "ja",
dateFormat: "Y年m月d日"
});
</script>
日付ピッカーはただカレンダーを表示するだけではなく、実用的な機能を持たせることでさらに便利になります。
flatpickr("#calendar", {
minDate: "today",
maxDate: "2025-12-31"
});
flatpickr("#calendar", {
disable: [
"2025-04-01", // 特定日
function(date) {
// 土日を無効化
return (date.getDay() === 0 || date.getDay() === 6);
}
]
});
flatpickr("#start_date", {
onChange: function(selectedDates, dateStr, instance) {
endCalendar.set("minDate", dateStr);
}
});
const endCalendar = flatpickr("#end_date");
ユーザーが「入力しやすい」「間違いにくい」と感じることで、フォーム離脱率を下げる効果も期待できます。
日付ピッカーは、ユーザーにとって非常に重要なUIのひとつです。
HTML5のtype="date"を使えば簡単に導入できますが、見た目や使い勝手を向上させたい場合は、jQuery UIやFlatpickrなどのライブラリを活用することで、よりリッチなユーザー体験を提供できます。
特に、スマートフォンでの操作性、範囲選択や日本語対応、デザインカスタマイズなどを考慮すれば、Flatpickrなどのモダンなライブラリは強力な選択肢です。
開発するWebページの目的やターゲットに応じて、最適な日付ピッカーを選んで実装していきましょう。