今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. 指定した要素の画像やテーブルをレスポンシブに「respontent」
  3. 画像が使えるアニメ効果付きドロップダウンメニュー「EliteBox Menu」
  4. タイプライターのようにテキストを1文字ずつ表示「typist」
  5. 数値のみ入力可能なフォームを実装「Numeric Input」

日付の範囲(期間)が指定できるカレンダー「Continuous Calendar」

スポンサーリンク

日付の範囲(期間)が指定できるカレンダーを実装してくれるプラグイン「Continuous Calendar」を紹介します。

jQueryプラグイン「Continuous Calendar」

このプラグインを使えば、マウスを使って、カレンダーの日付をドラッグすることで日付の範囲(期間)を指定することができます。

指定した期間の日付・時間を拾ってくれるので、期間がどのくらいかを表示するのも容易です。

スポンサーリンク

それではデモページをご覧ください。

「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>
スポンサーリンク

関連記事(一部広告含む)