日付の範囲（期間）が指定できるカレンダー「Continuous Calendar」
当ページのリンクには広告が含まれています。
スポンサーリンク
日付の範囲（期間）が指定できるカレンダーを実装してくれるプラグイン「Continuous Calendar」を紹介します。
jQueryプラグイン「Continuous Calendar」
このプラグインを使えば、マウスを使って、カレンダーの日付をドラッグすることで日付の範囲（期間）を指定することができます。
指定した期間の日付・時間を拾ってくれるので、期間がどのくらいかを表示するのも容易です。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Continuous Calendar のデモでーす。">
<title>Continuous Calendar - jQueryプラグイン</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery.continuousCalendar-latest-min.css" />
</head>
<body>
<h1>Continuous Calendar のデモでーす。</h1>
<p>カレンダーの日付をドラッグしてみてください。</p>
<div id="timeCalendar">
<input type="hidden" class="startDate" name="tripStartDate"/>
<input type="hidden" class="endDate" name="tripEndDate"/>
<div class="continuousCalendar"></div>
<div class="dateLabels">
<div>
<label for="starts">始め</label>
<span class="startDateLabel"></span>
<select id="starts" name="tripStartTime"></select>
</div>
<div>
<label for="ends">終わり</label>
<span class="endDateLabel"></span>
<select id="ends" name="tripEndTime"></select>
</div>
<div>
<label>期間</label>
<span class="totalTimeOfTrip"></span>
</div>
</div>
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.continuousCalendar-latest-min.js" charset="UTF-8"></script>
<script>
$("#timeCalendar").continuousCalendar({
weeksBefore: 10,
lastDate: "today",
selectToday: true,
isRange: true
});
$("#timeCalendar").bind('calendarChange', function() {
var container = $(this)
var startTime = container.find('select[name=tripStartTime]').val()
var endTime = container.find('select[name=tripEndTime]').val()
var range = container.calendarRange()
range = range.withTimes(startTime, endTime)
container.find('.totalTimeOfTrip').text(DateFormat.formatRange(range, DateLocale.EN)).toggleClass('invalid', !range.isValid())
});
$("#timeCalendar select").bind('change', function() {
$("#timeCalendar").trigger('calendarChange');
});
$("#timeCalendar select").each(function() {
for(i = 0; i < 24; i++) {
$(this).append($("<option>").text(i + ":00")).append($("<option>").text(i + ":30"));
}
});
</script>
</body>
</html>
スポンサーリンク