A convenient date range plugin for jquery
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
vendor
.gitignore
LICENSE
README.md
build.js
index-ko.html
index.html
jquery-rangepicker-ko.min.js
jquery-rangepicker.min.js
style.css

README.md

jquery-rangepicker

A convenient date-range plugin for jquery.

Introduction

There are a lot of datepickers out there but none of them fitted my needs. So I decided to add one more to the bunch :) I needed something that would allow the user to define an arbitrary period and a fixed period like day, week or month in an easy and intuitive way.

The rangepicker jquery plugin is simple easy and follows my two mottos in programming Keep-It-Simple-Stupid and Principle-Of-Least-Astonishment.

<div id="rangepicker"></div>

<script type="text/javascript">
  // define a rangepicker starting on today
  $('#rangepicker').rangepicker();
</script>

Live Example

There is a live demo running the latest build at jsFiddle

Requirements

The jquery-rangepicker requires strftime to be implemented on the Date object. There are numerious ways to do this and you can even write your own :) However this is the one I use and recommend:

http://hacks.bluesmoon.info/strftime/

Options

currentDate: the currentDate for the rangepicker (default: new Date())

dateFrom: the start of the period defined in the calendar (default: currentDate)

dateTo: the end of the period defined in the calendar (default: currentDate)

periodType: the initial period type i.e. 'day', 'week', 'month' or 'custom' (default: 'day')

displayedDate: the date thate determines the month viewed in the calendar (default: currentDate)

onUpdate: callback for period updates (default: undefined)

cyclePeriodTypes: controls whether clicking on the same date should trigger a period type cycle (default: true)

valueFormat: the strftime format for the values displayed in from and to boxes (default: '%Y-%m-%d')

displayFormat: the strftime format for the date displayed in navigation area (default: '%Y %b')

minDate: the oldest date enabled by the calendar (default: null)

maxDate: the newest date enabled by the calendar (default: new Date())

followFixed: controls whether clicking on a date in surrounding month changes display when in fixed mode (default: false)

followCustom: controls whether clicking on a date in surrounding month changes display when in custom mode (default: false)

rootTemplate: the template that defines the base container for the rangepicker

<div class="rangepicker"></div>

dayTemplate: the template that defines the node for a day in the calendar

<a href="#" class="day"></a>

weekTemplate: the template that defines the node for a week in the calendar

<div class="week"></div>

monthTemplate: the template that defines the node for a month in the calendar

<div class="month"></div>

calendarTemplate: the template that defines the node for the calendar itself

<div class="calendar"></div>

navTemplate: the template that defines the container for the navigation controls

<div class="navigation"></div>

prevTemplate: the template for the previous "button"

<a href="#" class="prev">&lt;</a>

displayTemplate: the template for the display area of the navigation

<span class="display"></span>

nextTemplate: the template for the next "button"

<a href="#" class="next">&gt;</a>

rangeTemplate: the template that defines the container for the range controls

<div class="range"></div>

fromTemplate: the template for the from "button"

<a href="#" class="from"></a>

todayTemplate: the template for the today "button"

<a href="#" class="today">Today</a>

toTemplate: the template for the to "button"

<a href="#" class="to"></a>

modeTemplate: the template that defines the container for the mode controls

<div class="mode"></div>

fixedTemplate: the template for the fixed "button"

<a href="#" class="fixed">Fixed</a>

customTemplate: the template for the custom "button"

<a href="#" class="custom">Custom</a>

disabledClass: the class set on days outside range defined by minDate and maxDate (default: 'disabled')

selectedClass: the class set on day(s) selected in the calendar

includedClass: the class set on days included in the selected range (default: 'included')

activeClass: the class set on active mode area (default: 'active')

todayClass: the class set on day equal to today (default: 'today')

Knockout.js bindings

A simple rangepicker binding for Knockout.js is included in jquery-rangepicker-ko.js as well as a binding for the included strftime.js extension for javascript Date.

<div data-bind="rangepicker: dateRange"></div>
<div data-bind="strftime: dateFrom, dateFormat: '%Y %b %d'"></div>
<div data-bind="strftime: dateTo, dateFormat: '%Y %b %d'"></div>

<script type="text/javascript">
  $(function () {
    var ViewModel = function () {
      this.dateRange = ko.observable([new Date(), new Date()]);
      this.dateFrom = ko.computed(function () {
        if (dateRange()) { return this.dateRange()[0]; }
      }, this)
      this.dateFrom = ko.computed(function () {
        if (this.dateRange()) { return this.dateRange()[1]; }
      }, this)
    };
    ko.applyBindings(new ViewModel());
  });
</script>