jQueryを使用した日付範囲ピッカーの作成
はじめに
本記事では、ホテル予約サイトなどでよく見かける 日付範囲選択フォーム を、HTML・jQuery・CSSを用いて作成する方法を紹介します。日付入力フォームをクリックするとカレンダーが表示され、2つの日付を選択することで範囲がハイライトされるように実装しています。
完成イメージ
1. 初期状態の入力フォーム
フォームをクリックするとカレンダーが表示されます。
2. カレンダーが表示された状態
3. 日付を選択し、範囲をハイライト
選択された日付範囲が青くハイライトされ、決定ボタンを押すとフォームに選択した日付が表示されます。
クリアボタンを押すと、選択した日付を解除できます。
実装した機能
1. 2か月分のカレンダー表示
カレンダーを 2か月分表示 し、ナビゲーションボタンで前月・次月に移動できるようにしました。
2. 選択範囲のハイライト
選択した 2つの日付の間を青くハイライト し、視覚的に範囲をわかりやすくしました。
3. コンソールでの確認
日付が決定された際に、選択された期間が コンソールに表示 されるようにしました。
4. カレンダーの横並び表示
カレンダーを 2か月分横並びで表示 することで、使いやすさを向上させました。
5. 月をまたいだ範囲選択の修正
月をまたいで日付を選択した場合でも、正しくハイライトが適用されるよう修正しました。
6. 未来の日付が先に選択された場合の処理
未来の日付が先に選択された場合、その日付を 一度解除し、過去の日付から選択できる ようにしました。
コードの実装（HTML + jQuery + CSS）
以下に、HTML・CSS・jQueryを組み合わせたコードを掲載します。
HTML + CSS + jQuery
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 日付範囲ピッカー</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.calendar-container {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
padding: 10px;
z-index: 1000;
}
.calendar {
display: inline-block;
margin: 10px;
}
.date-input {
width: 150px;
padding: 5px;
margin: 5px;
}
.calendar td {
padding: 5px;
text-align: center;
cursor: pointer;
}
.calendar td.selected {
background-color: #007bff;
color: white;
}
.calendar td.range {
background-color: #a6c8ff;
}
.navigation-buttons {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>jQuery 日付範囲ピッカー</h1>
<input type="text" id="daterange" class="date-input" placeholder="日付">
<div class="calendar-container" id="calendarContainer">
<div class="navigation-buttons">
<button id="prevMonth">< 前月</button>
<span id="currentMonth1"></span>
<span id="currentMonth2"></span>
<button id="nextMonth">次月 ></button>
</div>
<div class="calendar" id="calendar1"></div>
<div class="calendar" id="calendar2"></div>
<button id="applyDates">決定</button>
<button id="clearDates">クリア</button>
</div>
<script>
$(document).ready(function () {
let selectedDates = [];
let currentDate = new Date();
function updateCalendar(monthOffset = 0) {
currentDate.setMonth(currentDate.getMonth() + monthOffset);
let nextMonthDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
$('#currentMonth1').text(`${currentDate.getFullYear()}年 ${currentDate.getMonth() + 1}月`);
$('#currentMonth2').text(`${nextMonthDate.getFullYear()}年 ${nextMonthDate.getMonth() + 1}月`);
}
$('#daterange').on('focus', function () {
$('#calendarContainer').toggle();
});
$('#applyDates').on('click', function () {
$('#calendarContainer').hide();
});
$('#clearDates').on('click', function () {
selectedDates = [];
$('#daterange').val('');
});
updateCalendar();
});
</script>
</body>
</html>
まとめ
本記事では jQueryを使用して日付範囲ピッカーを作成 する方法を紹介しました。
なお、Flatpickr などのライブラリを使用すると、より簡単に同様の機能を実装できます。用途に応じて適切な方法を選択してください。
このコードを活用し、カレンダー機能を実装してみてください！