Skip to content

Wernfried/daterangepicker

BranchesTags
 
 

Repository files navigation

Date Range Picker

Improvely.com

This date range picker component creates a dropdown menu from which a user can select a range of dates.

Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, a time picker, and predefined date ranges.

Documentation and Live Usage Examples

See It In a Live Application

Above samples are based on the original repository from Dan Grossman. New features from this fork are not available in these samples.

Basic usage

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.9.5/daterangepicker.min.js"></script>
<link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.9.5/daterangepicker.min.css" rel="stylesheet" />

<input type="text" id="daterange" />

<script>
$(function() {
   const options = {
      timePicker: true
   }
   $('#daterange').daterangepicker(options);
});
</script>

Examples

ranges

{
   'Today': [DateTime.now().startOf('day'), DateTime.now().endOf('day')],
   'Yesterday': [DateTime.now().startOf('day').minus({day: 1}), DateTime.now().endOf('day').minus({day: 1})],
   'Last 7 Days': ['2025-03-01', '2025-03-07'],
   'Last 30 Days': [new Date(new Date - 1000*60*60*24*30), new Date()],
   'This Month': [DateTime.now().startOf('month'), DateTime.now().endOf('month')],
   'Last Month': [DateTime.now().minus({month: 1}).startOf('month'), DateTime.now().minus({month: 1}).endOf('month')]
}

isInvalidDate

isInvalidDate: function(date) {
   return date.isWeekend;
}

isInvalidTime

isInvalidTime: (time, side, unit) => {   
   if (unit == 'hour') {
      return time.hour >= 10 && time.hour <= 14; // Works also with 12-hour clock      
   } else {
      return false;
   }
}

isCustomDate

.daterangepicker-bank-day {
  color: red;
}
.daterangepicker-weekend-day {
  color: blue;
}

isCustomDate: function(date) {
   if (date.isWeekend)
      return 'daterangepicker-weekend-day';

   const yyyy = date.year;
   let bankDays = [
      DateTime.fromObject({ year: yyyy, month: 1, day: 1 }), // New year
      DateTime.fromObject({ year: yyyy, month: 7, day: 4 }), // Independence Day
      DateTime.fromObject({ year: yyyy, month: 12, day: 25 }) // Christmas Day
   ];
   return bankDays.some(x => x.hasSame(date, 'day')) ? 'daterangepicker-bank-day' : '';
}

Features

Compared to inital repository, this fork added following features and changes:

  • Replaced moment by luxon (see differences below)
  • Added option weekendClasses, weekendDayClasses, todayClasses to highlight weekend days or today, respectively
  • Added option timePickerStepSize to succeed options timePickerIncrement and timePickerSeconds
  • Added events dateChange.daterangepicker and timeChange.daterangepicker emitted when user clicks on a date/time
  • Added event beforeHide.daterangepicker enables you to keep the picker visible after click on Apply or Cancel button.
  • Added event beforeRenderTimePicker.daterangepicker and beforeRenderCalendar.daterangepicker emitted before elements are rendered
  • Added method setRange(startDate, endDate) to combine setStartDate(startDate) and setEndDate(endDate)
  • Added option minSpan similar to maxSpan
  • Added option isInvalidTime similar to isInvalidDate
  • Added option altInput and altFormat to provide an alternative output element for selected date value
  • Added option onOutsideClick where you can define whether picker shall apply or revert selected value
  • Added option initalMonth to show datepicker without an initial date
  • Added option singleMonthView to show single month calendar, useful for shorter ranges
  • Better validation of input parameters, errors are logged to console
  • Highlight range in calendar when hovering over pre-defined ranges
  • Option autoUpdateInput defines whether the attached <input> element is updated when the user clicks on a date value.
    In original daterangepicker this parameter defines whether the <input> is updated when the user clicks on Apply button.
  • Added option locale.durationFormat to show customized label for selected duration, e.g. '4 Days, 6 Hours, 30 Minutes'
  • ... and maybe some new bugs 😉

Localization

All date values are based on luxon which provides great support for localization. Instead of providing date format, weekday and month names manually as strings, it is usually easier to set the default locale like this:

$(document).ready(function () {
   const Settings = luxon.Settings;
   Settings.defaultLocale = 'fr-CA'

   $('#picker').daterangepicker({
      timePicker: true,
      singleDatePicker: false
   };
});

instead of

$(document).ready(function () {
   $('#picker').daterangepicker({
      timePicker: true,
      singleDatePicker: false,
      locale: {
         format: 'yyyyy-M-d H h m',
         daysOfWeek: [ 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.', 'dim.' ],
         monthNames: [ "janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre" ],
         firstDay: 7
      }
   };
});

Methods

Available methods are listed below in API documentation. You will mainly use

all other methods are used rarely.

Differences between moment and luxon library

This table lists a few important differences between datarangepicker using moment and luxon. Check them carefully when you migrate from older daterangepicker.

Parameter moment luxon
locale.daysOfWeek [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ]
locale.firstDay 0-6 (Sunday to Saturday) 1 for Monday through 7 for Sunday
to ISO-8601 String toISOString() toISO()
to Date Object toDate() toJSDate()
from ISO-8601 String moment(...) DateIme.fromISO(...)
from Date Object moment(...) DateIme.fromJSDate(...)
current day moment() DateTime.now()
format to string format(...) toFormat(...)
format tokens 'YYYY-MM-DD' 'yyyy-MM-dd'

License

The MIT License (MIT)

Copyright (c) 2012-2019 Dan Grossman
Copyright (c) 2025 Wernfried Domscheit

Licensed under the MIT license.

API Documentation

Classes

DateRangePicker

Events

"beforeRenderCalendar.daterangepicker" (this)

Emitted before the calendar is rendered. Useful to remove any manually added elements.

"beforeRenderTimePicker.daterangepicker" (this)

Emitted before the TimePicker is rendered. Useful to remove any manually added elements.

"show.daterangepicker" (this)

Emitted when the picker is shown

"beforeHide.daterangepicker" (this) ⇒ boolean

Emitted before the picker will hide. When EventHandler returns true, then picker remains visible

"hide.daterangepicker" (this)

Emitted when the picker is hidden

"outsideClick.daterangepicker" (this)

Emitted when user clicks outside the picker. Use option onOutsideClick to define the default action, then you may not need to handle this event.

"showCalendar.daterangepicker" (this)

Emitted when the calendar(s) are shown. Only useful when Ranges are used.

"hideCalendar.daterangepicker" (this)

Emitted when the calendar(s) are hidden. Only useful when Ranges are used.

"dateChange.daterangepicker" (this, side)

Emitted when the date changed. Does not trigger when time is changed, use "timeChange.daterangepicker" to handle it

"apply.daterangepicker" (this)

Emitted when the Apply button is clicked, or when a predefined Ranges is clicked

"cancel.daterangepicker" (this)

Emitted when the Cancel button is clicked

"timeChange.daterangepicker" (this, side)

Emitted when the time changed. Does not trigger when date is changed

"inputChanged.daterangepicker" (this)

Emitted when the date is changed through <input> element. Event is only triggered when date string is valid and date value has changed

Typedefs

Options

Options for DateRangePicker

Ranges : Object

A set of predefined ranges

Range : Object

A single predefined range

constraintOptions : Object
callback : function

DateRangePicker

Kind: global class

new DateRangePicker(element, options, cb)

Param Type Description
element jQuery jQuery selector of the parent element that the date range picker will be added to
options Options Object to configure the DateRangePicker
cb function Callback function executed when

dateRangePicker.setStartDate(startDate, isValid)

Sets the date range picker's currently selected start date to the provided date.
startDate must be a luxon.DateTime or Date or string according to ISO-8601 or a string matching locale.format. The value of the attached <input> element is also updated. Date value is rounded to match option timePickerStepSize
Functions isInvalidDate and isInvalidTime are not evaluated, you may set date/time which is not selectable in calendar.
If the startDate does not fall into minDate and maxDate then startDate is shifted and a warning is written to console.

Kind: instance method of DateRangePicker
Throws:

  • RangeError for invalid date values.
Param Type Default Description
startDate DateTime | Date | string startDate to be set
isValid boolean false If true then the startDate is not checked against minDate and maxDate
Use this option only if you are really sure about the value you put in.

Example

const DateTime = luxon.DateTime;
const drp = $('#picker').data('daterangepicker');
drp.setStartDate(DateTime.now().startOf('hour'));

dateRangePicker.setEndDate(endDate, isValid)

Sets the date range picker's currently selected end date to the provided date.
endDate must be a luxon.DateTime or Date or string according to ISO-8601 or a string matchinglocale.format. The value of the attached <input> element is also updated. Date value is rounded to match option timePickerStepSize
Functions isInvalidDate and isInvalidTime are not evaluated, you may set date/time which is not selectable in calendar.
If the endDate does not fall into minDate and maxDate or into minSpan and maxSpan then endDate is shifted and a warning is written to console.

Kind: instance method of DateRangePicker
Throws:

  • RangeError for invalid date values.
Param Type Default Description
endDate DateTime | Date | string endDate to be set
isValid boolean false If true then the endDate is not checked against minDate, maxDate and minSpan, maxSpan
Use this option only if you are really sure about the value you put in.

Example

const drp = $('#picker').data('daterangepicker');
drp.setEndDate('2025-03-28T18:30:00');

dateRangePicker.setPeriod(startDate, endDate, isValid)

Shortcut for setStartDate and setEndDate

Kind: instance method of DateRangePicker
Throws:

  • RangeError for invalid date values.
Param Type Default Description
startDate DateTime | Date | string startDate to be set
endDate DateTime | Date | string endDate to be set
isValid boolean false If true then the startDate and endDate are not checked against minDate, maxDate and minSpan, maxSpan
Use this option only if you are really sure about the value you put in.

Example

const DateTime = luxon.DateTime;
const drp = $('#picker').data('daterangepicker');
drp.setPeriod(DateTime.now().startOf('week'), DateTime.now().startOf('week').plus({days: 10}));

dateRangePicker.constrainDate(options, [range]) ⇒ Array

Validate startDate and endDate or range against timePickerStepSize, minDate, maxDate, minSpan, maxSpan, invalidDate and invalidTime and modifies them, if needed. When startDate or endDate are modified, then a warning is written to console by default.

Kind: instance method of DateRangePicker
Returns: Array - - Corrected range as array of [startDate, endDate, isInvalid] when range is set, otherwise just isInvalid object
Throws:

  • RangeError if 'minDate' contradicts to 'minSpan'
Param Type Description
options constraintOptions Defines which constraints shall be validated
[range] Array Used to check prefefined range instead of startDate and endDate => [name, startDate, endDate] When set, then function does not modify anything, just returning corrected range.

Example

constrainDate({}, [DateTime.fromISO('2025-02-03'), DateTime.fromISO('2025-02-25')]) => 
[ DateTime.fromISO('2025-02-05'), DateTime.fromISO('2025-02-20'), { startDate: { stepped: ... }, endDate: { stepped: ..., modified: [{old: ... new: ..., reason: 'minSpan'}] } } ]
constrainDate({span: false, invalidDate: true, invalidTime: true}) => 
{ startDate: {stepped: ..., modified: [{old: ... new: ..., reason: 'minDate'}], isInvalidDate: true, isInvalidTime: false}, endDate: {stepped: ..., isInvalidDate: false, isInvalidTime: true} } ]

dateRangePicker.updateView()

Updates the picker when calendar is initiated or any date has been selected. Could be useful after running setStartDate or setEndDate

Kind: instance method of DateRangePicker
Emits: event:"beforeRenderTimePicker.daterangepicker"

dateRangePicker.showCalendars()

Shows calendar when user selects "Custom Ranges"

Kind: instance method of DateRangePicker
Emits: event:"showCalendar.daterangepicker"

dateRangePicker.hideCalendars()

Hides calendar when user selects a predefined range

Kind: instance method of DateRangePicker
Emits: event:"hideCalendar.daterangepicker"

dateRangePicker.updateElement()

Update attached <input> element with selected value

Kind: instance method of DateRangePicker
Emits: change

dateRangePicker.remove()

Removes the picker from document

Kind: instance method of DateRangePicker

DateRangePicker.daterangepicker(options, callback) ⇒

Initiate a new DateRangePicker

Kind: static method of DateRangePicker
Returns: DateRangePicker

Param Type Description
options Options Object to configure the DateRangePicker
callback callback Callback function executed when date is changed.
Callback function is executed if selected date values has changed, before picker is hidden and before the attached <input> element is updated. As alternative listen to the "apply.daterangepicker" event

"beforeRenderCalendar.daterangepicker" (this)

Emitted before the calendar is rendered. Useful to remove any manually added elements.

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"beforeRenderTimePicker.daterangepicker" (this)

Emitted before the TimePicker is rendered. Useful to remove any manually added elements.

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"show.daterangepicker" (this)

Emitted when the picker is shown

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"beforeHide.daterangepicker" (this) ⇒ boolean

Emitted before the picker will hide. When EventHandler returns true, then picker remains visible

Kind: event emitted
Returns: boolean - cancel - If true, then the picker remains visible

Param Type Description
this DateRangePicker The daterangepicker object

"hide.daterangepicker" (this)

Emitted when the picker is hidden

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"outsideClick.daterangepicker" (this)

Emitted when user clicks outside the picker. Use option onOutsideClick to define the default action, then you may not need to handle this event.

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"showCalendar.daterangepicker" (this)

Emitted when the calendar(s) are shown. Only useful when Ranges are used.

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"hideCalendar.daterangepicker" (this)

Emitted when the calendar(s) are hidden. Only useful when Ranges are used.

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"dateChange.daterangepicker" (this, side)

Emitted when the date changed. Does not trigger when time is changed, use "timeChange.daterangepicker" to handle it

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object
side string Either 'start' or 'end' indicating whether startDate or endDate was changed. null when singleDatePicker: true

"apply.daterangepicker" (this)

Emitted when the Apply button is clicked, or when a predefined Ranges is clicked

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"cancel.daterangepicker" (this)

Emitted when the Cancel button is clicked

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

"timeChange.daterangepicker" (this, side)

Emitted when the time changed. Does not trigger when date is changed

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object
side string Either 'start' or 'end' indicating whether startDate or endDate was changed

"inputChanged.daterangepicker" (this)

Emitted when the date is changed through <input> element. Event is only triggered when date string is valid and date value has changed

Kind: event emitted

Param Type Description
this DateRangePicker The daterangepicker object

Options

Options for DateRangePicker

Kind: global typedef
Properties

Name Type Default Description
parentEl string "body" jQuery selector of the parent element that the date range picker will be added to
startDate DateTime | Date | string | null Default: DateTime.now().startOf('day')
The beginning date of the initially selected date range.
Must be a luxon.DateTime or Date or string according to ISO-8601 or a string matching locale.format.
Date value is rounded to match option timePickerStepSize
Option isInvalidDate and isInvalidTime are not evaluated, you may set date/time which is not selectable in calendar.
If the date does not fall into minDate and maxDate then date is shifted and a warning is written to console.
Use startDate: null to show calendar without an inital selected date.
endDate DateTime | Date | string Defautl: DateTime.now().endOf('day')
The end date of the initially selected date range.
Must be a luxon.DateTime or Date or string according to ISO-8601 or a string matching locale.format.
Date value is rounded to match option timePickerStepSize
Option isInvalidDate, isInvalidTime and minSpan, maxSpan are not evaluated, you may set date/time which is not selectable in calendar.
If the date does not fall into minDate and maxDate then date is shifted and a warning is written to console.
minDate DateTime | Date | string | null The earliest date a user may select or null for no limit.
Must be a luxon.DateTime or Date or string according to ISO-8601 or a string matching locale.format.
maxDate DateTime | Date | string | null The latest date a user may select or null for no limit.
Must be a luxon.DateTime or Date or string according to ISO-8601 or a string matching locale.format.
minSpan Duration | string | number | null The maximum span between the selected start and end dates.
Must be a luxon.Duration or number of seconds or a string according to ISO-8601 duration.
Ignored when singleDatePicker: true
maxSpan Duration | string | number | null The minimum span between the selected start and end dates.
Must be a luxon.Duration or number of seconds or a string according to ISO-8601 duration.
Ignored when singleDatePicker: true
initalMonth DateTime | Date | string | null Default: DateTime.now().startOf('month')
The inital month shown when startDate: null. Be aware, the attached <input> element must be also empty.
Must be a luxon.DateTime or Date or string according to ISO-8601 or a string matching locale.format.
When initalMonth is used, then endDate is ignored and it works only with timePicker: false
autoApply boolean false Hide the Apply and Cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
Only useful when timePicker: false
singleDatePicker boolean false Show only a single calendar to choose one date, instead of a range picker with two calendars.
The start and end dates provided to your callback will be the same single date chosen.
singleMonthView boolean false Show only a single month calendar, useful when selected ranges are usually short
or for smaller viewports like mobile devices.
Ignored for singleDatePicker: true.
showDropdowns boolean false Show year and month select boxes above calendars to jump to a specific month and year
minYear number Default: DateTime.now().minus({year:100}).year
The minimum year shown in the dropdowns when showDropdowns: true
maxYear number Default: DateTime.now().plus({year:100}).year
The maximum year shown in the dropdowns when showDropdowns: true
showWeekNumbers boolean false Show localized week numbers at the start of each week on the calendars
showISOWeekNumbers boolean false Show ISO week numbers at the start of each week on the calendars.
Takes precedence over localized showWeekNumbers
timePicker boolean false Adds select boxes to choose times in addition to dates
timePicker24Hour boolean true Use 24-hour instead of 12-hour times, removing the AM/PM selection
timePickerStepSize Duration | string | number Default: Duration.fromObject({minutes:1})
Set the time picker step size.
Must be a luxon.Duration or the number of seconds or a string according to ISO-8601 duration.
Valid values are 1,2,3,4,5,6,10,12,15,20,30 for Duration.fromObject({seconds: ...}) and Duration.fromObject({minutes: ...}) and 1,2,3,4,6,(8,12) for Duration.fromObject({hours: ...}).
Duration must be greater than minSpan and smaller than maxSpan.
For example timePickerStepSize: 600 will disable time picker seconds and time picker minutes are set to step size of 10 Minutes.
Overwrites timePickerIncrement and timePickerSeconds, ignored when timePicker: false
timePickerSeconds boolean boolean Deprecated, use timePickerStepSize
Show seconds in the timePicker
timePickerIncrement boolean 1 Deprecated, use timePickerStepSize
Increment of the minutes selection list for times
autoUpdateInput boolean true Indicates whether the date range picker should instantly update the value of the attached <input> element when the selected dates change.
The <input> element will be always updated on Apply and reverted when user clicks on Cancel.
onOutsideClick string "apply" Defines what picker shall do when user clicks outside the calendar. 'apply' or 'cancel'. Event onOutsideClick.daterangepicker is always emitted.
linkedCalendars boolean true When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars.
When disabled, the two calendars can be individually advanced and display any month/year
isInvalidDate function false A function that is passed each date in the two calendars before they are displayed,
and may return true or false to indicate whether that date should be available for selection or not.
Signature: isInvalidDate(date)
Function has no effect on date values set by startDate, endDate, ranges, setStartDate, setEndDate.
isInvalidTime function false A function that is passed each hour/minute/second/am-pm in the two calendars before they are displayed,
and may return true or false to indicate whether that date should be available for selection or not.
Signature: isInvalidTime(time, side, unit)
side is 'start' or 'end' or null for singleDatePicker: true
unit is 'hour', 'minute', 'second' or 'ampm'
Hours are always given as 24-hour clock
Function has no effect on time values set by startDate, endDate, ranges, setStartDate, setEndDate.
Ensure that your function returns false for at least one item. Otherwise the calender is not rendered.
isCustomDate function false A function that is passed each date in the two calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell.
Signature: isCustomDate(date)
altInput string | Array null A jQuery selector string for an alternative ouput (typically hidden) <input> element. Requires altFormat to be set.
Must be a single string for singleDatePicker: true or an array of two strings for singleDatePicker: false
Example: ['#start', '#end']
altFormat function | string The output format used for altInput.
Either a string used with toFormat() or a function.
Examples: 'yyyyMMddHHmm', (date) => date.toUnixInteger()
warnings boolean true When enabled, then warning are printed to console if input date violates minDate, maxDate, minSpan, maxSpan, timePickerStepSize, isInvalidDate, isInvalidTime
applyButtonClasses string "btn-primary" CSS class names that will be added only to the apply button
cancelButtonClasses string "btn-default" CSS class names that will be added only to the cancel button
buttonClasses string Default: 'btn btn-sm'
CSS class names that will be added to both the apply and cancel buttons.
weekendClasses string "weekend" CSS class names that will be used to highlight weekend days.
Use null or empty string if you don't like to highlight weekend days.
weekendDayClasses string "weekend-day" CSS class names that will be used to highlight weekend day names.
Weekend days are evaluated by Info.getWeekendWeekdays and depend on current locale settings. Use null or empty string if you don't like to highlight weekend day names.
todayClasses string "today" CSS class names that will be used to highlight the current day.
Use null or empty string if you don't like to highlight the current day.
opens string "right" Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.
'left' | 'right' | 'center'
drops string "down" Whether the picker appears below or above the HTML element it's attached to.
'down' | 'up' | 'auto'
ranges object {} Set predefined date Ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range.
showCustomRangeLabel boolean true Displays "Custom Range" at the end of the list of predefined Ranges, when the ranges option is used.
This option will be highlighted whenever the current date range selection does not match one of the predefined ranges.
Clicking it will display the calendars to select a new range.
alwaysShowCalendars boolean false Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range".
When this option is set to true, the calendars for choosing a custom date range are always shown instead.
locale object {} Allows you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars.
locale.direction string "ltr" Direction of reading, 'ltr' or 'rtl'
locale.format object | string Default: DateTime.DATE_SHORT or DateTime.DATETIME_SHORT when timePicker: true
Date formats. Either given as string, see Format Tokens or an object according to Intl.DateTimeFormat
I recommend to use the luxon Presets.
locale.separator string Defaut: ' - '
Separator for start and end time
locale.weekLabel string "W" Label for week numbers
locale.daysOfWeek Array Default: luxon.Info.weekdays('short')
Array with weekday names, from Monday to Sunday
locale.monthNames Array Default: luxon.Info.months('long')
Array with month names
locale.firstDay number Default: luxon.Info.getStartOfWeek()
First day of the week, 1 for Monday through 7 for Sunday
locale.applyLabel string "Apply" Label of Apply Button
locale.cancelLabel string "Cancel" Label of Cancel Button
locale.customRangeLabel string "Custom" Range - Title for custom ranges
locale.durationFormat object | string {} Format a custom label for selected duration, for example '5 Days, 12 Hours'.
Define the format either as string, see Duration.toFormat - Format Tokens or an object according to Intl.NumberFormat, see Duration.toHuamn.

Ranges : Object

A set of predefined ranges

Kind: global typedef
Properties

Name Type Description
name string The name of the range
range DateTime | Date | string Array of 2 elements with startDate and endDate

Example

{
 'Today': [DateTime.now().startOf('day'), DateTime.now().endOf('day')],
 'Yesterday': [DateTime.now().startOf('day').minus({days: 1}), DateTime.now().minus({days: 1}).endOf('day')],
 'Last 7 Days': [DateTime.now().startOf('day').minus({days: 6}), DateTime.now()],
 'Last 30 Days': [DateTime.now().startOf('day').minus({days: 29}), DateTime.now()],
 'This Month': [DateTime.now().startOf('day').startOf('month'), DateTime.now().endOf('month')],
 'Last Month': [DateTime.now().startOf('day').minus({months: 1}).startOf('month'), DateTime.now().minus({months: 1}).endOf('month')]
}

Range : Object

A single predefined range

Kind: global typedef
Properties

Name Type Description
name string The name of the range
range DateTime | Date | string Array of 2 elements with startDate and endDate

Example

{ Today: [DateTime.now().startOf('day'), DateTime.now().endOf('day')] }

constraintOptions : Object

Kind: global typedef
Properties

Name Type Default Description
stepSize boolean true If true, then startDate and endDate are rounded to match timePickerStepSize (no warning)
minMax boolean true If true and startDate and endDate do not fall into minDate and maxDate then dates are shifted and a warning is written to console.
span boolean true If true and startDate and endDate do not fall into minDate and maxSpan then endDate is shifted and a warning is written to console.
invalidDate boolean false If true and invalidDate returns true, then an error is logged to console
invalidTime boolean false If true and invalidTime returns true, then an error is logged to console
writeWarning boolean true If true a warning is written to console if startDate or endDate is modified with the exception of rounding due to timePickerStepSize.

callback : function

Kind: global typedef

Param Type Description
startDate DateTime Selected startDate
endDate DateTime Selected endDate
range string

About

JavaScript Date Range, Date and Time Picker Component

www.daterangepicker.com

Resources

Readme

License

MIT license
Activity

Stars

9 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 7

Initial release for 4.x Latest
Mar 24, 2025
+ 6 releases

Packages

No packages published

Languages

  • JavaScript 63.3%
  • HTML 32.2%
  • CSS 4.5%