callum-hart / DateRange.js

:calendar: :calendar: Multi-month datepicker

DateRange.js

DateRange.js is the bigger brother of DateJust.js.

It is a datepicker for choosing dates across multiple months. Like its sibling you can scroll to change month.

Getting Started

• Demo
• Supported Browsers
• Dependencies
• To Run
• To Use

Configuration

• minDate
• maxDate
• existingDateRange

Callbacks

• onDateRangeSelected

Markup

• Generated HTML

Getting Started

Demo

A demo of the library in action can be found here.

Supported Browsers

• Chrome ✅
• Opera ✅
• Firefox ✅
• Safari known issues (inherited from DateJust.js):
  • Scroll control isn't as smooth as other browsers.

Dependencies

DateRange.js has 1 dependency – and that is DateJust.js.

To Run

$ git clone [e-mail]:callum-hart/DateRange.js.git
$ cd DateRange.js
$ npm install
$ grunt watch

To Use

Include CSS and JavaScript from DateJust.js. Both need to be included before the CSS and JavaScript for DateRange.js:

<!-- CSS -->
<link href="date-just.min.css" rel="stylesheet">
<link href="date-range.min.css" rel="stylesheet">

<!-- JavaScript -->
<script type="text/javascript" src="date-just.min.js"></script>
<script type="text/javascript" src="date-range.min.js"></script>

Create an instance:

var instance = new DateRange(element, { options });

element can be a selector or a DOM element.

Configuration

minDate

• Details Minimum date each calendar can go to.
• Type <Date>
• Default January 10 years in the past (from todays date)
• Usage minDate: new Date(2010, 5, 10)

maxDate

• Details Maximum date each calendar can go to.
• Type <Date>
• Default January 10 years in the future (from todays date)
• Usage maxDate: new Date(2020, 5, 10)

existingDateRange

• Details Initialize the calendar with an active date range.
• Type Array <Date>
• Usage existingDateRange: [new Date(2016, 11, 8), new Date(2016, 11, 25)]

Callbacks

onDateRangeSelected

onDateRangeSelected: (startDate, endDate) {}

• Details When a date range is selected.
• Arguments (startDate, endDate)
• Condition Only called when both calendars have a selected date.

Markup

Generated HTML

The HTML generated by DateRange.js is:

<div class="dr-container">
  <div class="dj-container first-dj">
    <div class="dj-header">
      <div class="dj-month">
        <span class="dj-month-name"></span>
        <select class="dj-month-select"></select>
      </div>
      <div class="dj-year">
        <span class="dj-year-name"></span>
        <select class="dj-year-select"></select>
      </div>
      <a href="" class="previous-month">&#9654;</a>
      <a href="" class="next-month">&#9654;</a>
    </div>
    <ul class="day-names">
      <li>M</li>
      <li>T</li>
      <li>W</li>
      <li>T</li>
      <li>F</li>
      <li>S</li>
      <li>S</li>
    </ul>
    <ul class="days">
      <li>
        <a href=""></a>
      </li>
    </ul>
  </div>
  <div class="dj-container second-dj">
    <div class="dj-header">
      <div class="dj-month">
        <span class="dj-month-name"></span>
        <select class="dj-month-select"></select>
      </div>
      <div class="dj-year">
        <span class="dj-year-name"></span>
        <select class="dj-year-select"></select>
      </div>
      <a href="" class="previous-month">&#9654;</a>
      <a href="" class="next-month">&#9654;</a>
    </div>
    <ul class="day-names">
      <li>M</li>
      <li>T</li>
      <li>W</li>
      <li>T</li>
      <li>F</li>
      <li>S</li>
      <li>S</li>
    </ul>
    <ul class="days">
      <li>
        <a href=""></a>
      </li>
    </ul>
  </div>
</div>