Date Range Picker With jQuery And jQuery UI - DateRangePicker

File Size: 11.2 KB
Views Total: 21360
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Date Range Picker With jQuery And jQuery UI - DateRangePicker

A jQuery plugin for converting a jQuery UI date picker widget into a date range picker which enables the visitor to select a date range in one control. It does so by overriding some of the methods, adding some settings, changing the defaults of some settings (including some custom event handlers), some properties to the inst objects that represent a date picker instance, and by adding some styling based on  added css classes to the date picker.

How to use it:

1. Load the necessary jQuery and jQuery UI JavaScript libraries in the html page.

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-ui.js"></script>
<link rel="stylesheet" href="/path/to/jquery-ui.css">

2. Download the plugin and load the BuroRaDer.DateRangePicker.js & BuroRaDer.DateRangePicker.css after jQuery library.

<script src="BuroRaDer.DateRangePicker.js"></script>
<link rel="stylesheet" href="BuroRaDer.DateRangePicker.css">

3. It is expected that a date range is represented by 2 input elements, 1 for the start date, 1 for the end date. they should be linked - and therefore recognizable as a date range couple - to each other via the data attributes: data-date-range-end and data-date-range-start.

<label for="pickup">Pickup date:</label>
<input type="text" id="pickup" data-date-range-end="#return">
<label for="return">Return date:</label>
<input type="text" id="return" data-date-range-start="#pickup">

4. Initialize the plugin to generate a date range picker. When the date picker gets shown:

  • The datepicker is extended with 2 buttons to clear the selected date(s) and to hide the datepicker.
  • The user can select a date as normally.
  • However, the datepicker is not hidden but remains active.
  • The selected date gets placed in the 1st input and visually marked on the calendar.
  • All dates before the selected date get disabled.
  • The user can select a 2nd date.
  • The end date gets placed in the 2nd input and the date range gets visually marked on the calendar
  • The datepicker is hidden, so the use will only shortly see the selected date range.
  • If the user activates the datepicker again, it will see the selected date range.
  • It can adapt the end date by clicking on any date after the start date.
  • It can clear the selected date(s) via the button.
  • The datepicker will no longer hide automatically. The user will have to click the 'Done' button or press escape.
  • Changes made to the date range will continue to be reflected in the 2 inputs
  • Changes made to the inputs will be reflected on the calendar when it gets activated, not when it is active.
$("#pickup").datepicker({
  // options here
});

5. Possible plugin options.

$("#pickup").datepicker({
  
  numberOfMonths: 2,
  changeMonth: true,
  changeYear: true,

  // How many days at least must the end date be after the start date. 
  // 0: same date may be selected as both start and end date.
  minRangeDuration: 0,

  // Should the end date be inclusive or not. 
  // Set to true for arrival/departure date or overnight allocation use cases. 
  // This property only influences the visual representation of the date range.
  isTo1: false,

  // Should the date range be shown as split days on the arrival and end date. 
  // Set to true for arrival/departure date or overnight allocation use cases. 
  // This property only influences the visual representation of the date range.
  showSplitDay: false,

  // This setting represents an event handler that allows to add classes to the html of each day cell.
  // Applications that overrule this setting will loose the css class based styles that visualize a date range.
  beforeShowDay: window.BuroRaDer.DateRangePicker.beforeShowDay,

  // The text to use for the 'Done' button.
  doneText: "Done",

  // The text to use for the 'Clear' button.
  clearText: "Clear selected date(s)"

});

Change log:

2016-03-21

  • inputStart and inputEnd are now jQuery objects instead of ELements (like input on the inst).
  • Use the attr() method instead of the data() method, they are not completely equal.

2016-03-08

  • JS optimized

This awesome jQuery plugin is developed by BuroRaDer. For more Advanced Usages, please check the demo page or visit the official website.