Multi-language jQuery Date Range Picker Plugin

Multi-language jQuery Date Range Picker Plugin
File Size: 155 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.

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

5. Events.

$('#dom-id')
.dateRangePicker()
.bind('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)
  // }
})
.bind('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"
  // }
})
.bind('datepicker-apply',function(event,obj)
{
  /* This event will be triggered when user clicks on the apply button */
  console.log(obj);
})
.bind('datepicker-close',function()
{
  /* This event will be triggered before date range picker close animation */
  console.log('before close');
})
.bind('datepicker-closed',function()
{
  /* This event will be triggered after date range picker close animation */
  console.log('after close');
})
.bind('datepicker-open',function()
{
  /* This event will be triggered before date range picker open animation */
  console.log('before open');
})
.bind('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

Change logs:

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.