Multi-language jQuery Date Range Picker Plugin

A fully customizable, cross-browser and multi-language jQuery date picker plugin that enables the users to select custom (or predefined) date ranges with ease.

Installation:

# Yarn
$ yarn add jquery-date-range-picker

# NPM
$ npm install jquery-date-range-picker --save

How to use it:

1. Load the necessary jQuery library and moment.js in your project.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

2. Load the jQuery Date Range Picker plugin's JS and CSS after jQuery library.

<link rel="stylesheet" href="daterangepicker.css">
<script src="jquery.daterangepicker.js"></script>

3. Create a basic date range picker with default settings.

$('#SELECTOR').dateRangePicker();

4. Full plugin options.

// Auto close
autoClose: false,

// The date format string used for Moment.
format: 'YYYY-MM-DD',

// The separator string used between date strings
separator: ' to ',

// pre-defined languages are "en" and "cn", you can define your own language then set this to the name of new language.
// You can also set this to "auto" to make it auto detect browser language.
language: 'auto',

// "sunday" or "monday"
startOfWeek: 'sunday',

// This function is called when get date range string from DOM
// When it is called, the context of this function is set to the datepicker DOM
getValue: function() {
  return $(this).val();
},

// This function is called when set date range string to DOM
setValue: function(s){
  if(!$(this).attr('readonly') && !$(this).is(':disabled') && s != $(this).val()){
    $(this).val(s);
  }
},

// This string defines the earliest date which is allowed for the user, same format as `format`
startDate: false,

// This string defines the latest date which is allowed for the user, same format as `format`
endDate: false,

// If enabled adds time selection controls. 
time: {
  enabled: false
},

// This number defines the minimum days of the selected range
// if this is 0, means do not limit minimum days
minDays: 0,

// This number defines the maximum days of the selected range
// if this is 0, means do not limit maximum days
maxDays: 0,

// hide or show shortcuts area  
showShortcuts: false,

// define the shortcuts buttons.
shortcuts:
{
  //'prev-days': [1,3,5,7],
  //'next-days': [3,5,7],
  //'prev' : ['week','month','year'],
  //'next' : ['week','month','year']
},

// define custom shortcut buttons.
customShortcuts : [],

// whether to render the date range picker dom in inline mode instead of overlay mode, 
// if set to true, please set `container` too
inline:false,

// where should the date range picker dom should be renderred to
container:'body',

// if you use inline mode, you may want the date range picker widget to be renderred when the page loads set this to true will also hide the "close" button
alwaysOpen:false,

// choose a single date instead of a date range.
singleDate:false,

lookBehind: false,

// auto batch select mode 
// false (default), week, month, week-range, month-range
batchMode: false,

duration: 200,

// If true, there will only be one previous and one next button. 
// Clicking them will change both the months. 
// This setting will have no effect if singleDate option is set to true
stickyMonths: false,

dayDivAttrs: [],
dayTdAttrs: [],
applyBtnClass: '',

// If true, it will show only one month instead of two months. 
// You can select date range  in the one month view. 
// If this is set to 'auto', it will be changed to true if the screen width is lower than 480.
singleMonth: 'auto',

hoveringTooltip: function(days, startTime, hoveringTime)
{
  return days > 1 ? days + ' ' + lang('days') : '';
},

// If show the top bar.
showTopbar: true,

// If true and if time is enabled, on choosing first enddate and than startdate, endtime and starttime will be swapped. 
// If this configkey is false, only date will be swapped, time will stay constant. 
// If time is disabled, this config key is not used.
swapTime: false,

// If this is true, you can only select second date after the first selected date.
selectForward: false,

// If this is true, you can only select second date before the first selected date.
selectBackward: false,

// If this is true, it will show week number of the year in the calendar.
showWeekNumbers: false,

// the function called to generate the week number. the first parameter will be the first day of a week
getWeekNumber: function(date) //date will be the first day of a week
{
  return moment(date).format('w');
},

customOpenAnimation: null,
customCloseAnimation: null,
customArrowPrevSymbol: null,
customArrowNextSymbol: null,
monthSelect: false,
yearSelect: false

5. Event handlers.

$('#dom-id')
.dateRangePicker()
.on('datepicker-first-date-selected', function(event, obj)
{
  /* This event will be triggered when first date is selected */
  console.log(obj);
  // obj will be something like this:
  // {
  //    date1: (Date object of the earlier date)
  // }
})
.on('datepicker-change',function(event,obj)
{
  /* This event will be triggered when second date is selected */
  console.log(obj);
  // obj will be something like this:
  // {
  //    date1: (Date object of the earlier date),
  //    date2: (Date object of the later date),
  //    value: "2013-06-05 to 2013-06-07"
  // }
})
.on('datepicker-apply',function(event,obj)
{
  /* This event will be triggered when user clicks on the apply button */
  console.log(obj);
})
.on('datepicker-close',function()
{
  /* This event will be triggered before date range picker close animation */
  console.log('before close');
})
.on('datepicker-closed',function()
{
  /* This event will be triggered after date range picker close animation */
  console.log('after close');
})
.on('datepicker-open',function()
{
  /* This event will be triggered before date range picker open animation */
  console.log('before open');
})
.on('datepicker-opened',function()
{
  /* This event will be triggered after date range picker open animation */
  console.log('after open');
})

6. API methods.

//after you called  $(dom).dateRangePicker();

$(dom).data('dateRangePicker')
  .setDateRange('2013-11-20','2013-11-25');  //set date range, two date strings should follow the `format` in config object, set the third argument to be `true` if you don't want this method to trigger a `datepicker-change` event.
  .clear();   // clear date range
  .close();   // close date range picker overlay
  .open();  // open date range picker overlay
  .destroy(); // destroy all date range picker related things

Changelog:

v0.20.1 (2020-10-28)

• Update node engine requirement

v0.20.0 (2018-09-27)

• updated

v0.19.0 (2018-08-17)

• updated

v0.18.0 (2018-04-23)

• Ukrainian language added

v0.17.0 (2018-04-18)

• add hovering effect on day elements
• add sticky month mode
• add single month mode
• enable adding elements on each day element
• available to hide the top bar
• no longer support IE6,7
• fix many bugs and style issues

2018-04-10

• v0.16.4: fix Memory leak when unbinding document events 

2018-04-06

• v0.16.3: fix month undefined

2018-04-04

• v0.16.2: Use moment.js to calculate the difference between dates

2017-12-15

• v0.16.1: Remove inline style (#362) and refactor style to real SCSS

2017-07-29

• v0.16.0: Comfortable month and year change

2017-07-03

• v0.15.0: Calculate left offset in respect of window limits

2017-03-29

• v0.14.4: JS update

2017-01-23

• v0.14.3: JS update

2016-11-08

• v0.14.2: Added Finnish translation

2016-10-24

• v0.14.0: jQuery 1.3.2 support

2016-10-05

• v0.13.0: Fix Russian translation

2016-10-05

• v0.12.0

2016-09-29

• Add options to change the start and end date on the fly

2016-09-22

• v0.9.0

2016-09-05

• Do not invoke setTime on 'mousemove' event

2016-07-25

• JS update.

2016-06-27

• Rewrite jQuery variable to local in attributesCallbacks function

2016-05-26

• v0.5.1

2016-03-11

• Add api-method to reset months view to default

2016-02-04

• added check date in checkAndSetDefaultValue, because moment.js 2.10.3+ now return "Invalid date"

2016-01-27

•   add support for custom animation

2016-01-21

• Bugfix with broken selection

2016-01-19

• added touchmove to time inputs for mobile devices

2016-01-05

• Fixed Close immediately after opening

2015-08-30

• Fixed singleDate and endDate issue

2015-08-27

• Make week number clickable

2015-08-23

• Fixed: Click issue with iOS device

2015-08-22

• Fixed: Hovering tooltip is wrong, if time is set from 00:00 to 23:59
• Fixed: Month with endDate does not show up when in week batch mode

2015-06-23

• Fixed: Cannot enter range manually

2015-06-21

• add argument to setDateRange to avoid event triggering when set to true

2015-05-14

• add argument to setDateRange to avoid event triggering when set to true

2015-05-10

• Add open and close events for datepicker

2015-05-06

• fix keyword error for IE8
• fix hidden shortcuts shouldn't hide the custom values

2015-04-23

• fix plugin module export and remove warning if moment is not in the global scope

2015-04-21

• Set optional autoclose for custom dates

2015-04-15

• Add option to set class on the apply-btn

2015-04-14

• Add config callbacks to modify td and div day tags

2015-03-31

• fix bug, open, format date with locale

---

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