日付の範囲(期間)が指定できるカレンダーを実装してくれるプラグイン「Continuous Calendar」を紹介します。
jQueryプラグイン「Continuous Calendar」
このプラグインを使えば、マウスを使って、カレンダーの日付をドラッグすることで日付の範囲(期間)を指定することができます。
指定した期間の日付・時間を拾ってくれるので、期間がどのくらいかを表示するのも容易です。
それではデモページをご覧ください。
「Continuous Calendar」のデモ
デモのソース(HTML + jQuery)
< 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" /> |
< h1 >Continuous Calendar のデモでーす。</ h1 > |
< p >カレンダーの日付をドラッグしてみてください。</ p > |
< input type = "hidden" class = "startDate" name = "tripStartDate" /> |
< input type = "hidden" class = "endDate" name = "tripEndDate" /> |
< div class = "continuousCalendar" ></ div > |
< label for = "starts" >始め</ label > |
< span class = "startDateLabel" ></ span > |
< select id = "starts" name = "tripStartTime" ></ select > |
< label for = "ends" >終わり</ label > |
< span class = "endDateLabel" ></ span > |
< select id = "ends" name = "tripEndTime" ></ select > |
< span class = "totalTimeOfTrip" ></ span > |
< 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 > |
$("#timeCalendar").continuousCalendar({ |
$("#timeCalendar").bind('calendarChange', function() { |
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")); |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。