Options
allowRepick
Type: Boolean
Default: false
If date range is already selected, then user can change only one of start date or end date (depends on clicked field) instead of new date range.
Code:
new Litepicker({
element: document.getElementById('start-date'),
elementEnd: document.getElementById('end-date'),
singleMode: false,
allowRepick: true,
})
autoApply
Type: Boolean
Default: true
Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
Code:
new Litepicker({
element: document.getElementById('datepicker'),
autoApply: false,
})
autoRefresh
Type: Boolean
Default: false
Indicates whether the date range picker should automatically update the value of the <input> element it’s attached to at initialization and when the selected dates change.
buttonText
Type: Object
Default: {"apply":"Apply","cancel":"Cancel","previousMonth":"<svg>...</svg>","nextMonth":"<svg>...</svg>","reset":"<svg>...</svg>"}
Text for buttons.
delimiter 1.5.0+
Type: String
Default: " - "
Delimiter between dates.
disallowLockDaysInRange
Type: Boolean
Default: false
Prevent to select date ranges with locked dates.
Throw error «INVALID_RANGE» in the event error:range
.
Note: with the lockDaysFilter
option you must check the range yourself. See example in lockDaysFilter
.
dropdowns 1.0.21+
Type: Object
Default: {"minYear":1990,"maxYear":null,"months":false,"years":false}
Enable dropdowns for months, years.
If maxYear
is null
then maxYear
will be equal to (new Date()).getFullYear()
.
Since v1.4.7 years
can be equal to asc
string to change the sort direction.
element
Type: HTMLElement
Default: null
Bind the datepicker to a element. Also is possible to bind to any element (not input) for example you need inline calendar.
elementEnd
Type: HTMLElement
Default: null
Bind the datepicker to a element for end date.
endDate
Type: Date | Number | String
Default: null
Preselect end date.
Required startDate
.
Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
firstDay
Type: Number
Default: 1
Day of start week. (0 - Sunday, 1 - Monday, 2 - Tuesday, etc…)
format
Type: String
Default: "YYYY-MM-DD"
The default output format.
Allowed formats:
Token | Output | |
---|---|---|
Day of Month | D | 1 2 … 30 31 |
DD | 01 02 … 30 31 | |
Month | M | 1 2 … 11 12 |
MM | 01 02 … 11 12 | |
MMM | Jan Feb … Nov Dec | |
MMMM | January February … November December | |
Year | YY | 70 71 … 29 30 |
YYYY | 1970 1971 … 2029 2030 |
You may escape formatting tokens using \.
Eg.:
format: 'YYYY-MM-DD\T00:00:00'
Result: 2020-01-01T00:00:00
Since v2.0.0 option format
support external library for parse/output.
Example with luxon:
...
format: {
// parse function should return Date object
// date - Date object or string (perhaps there will be more types, need to check)
parse(date) {
if (date instanceof Date) {
return date;
}
if (typeof date === 'string') {
return luxon.DateTime.fromFormat(date, 'yyyy LLL dd').toJSDate();
}
// from unix timestamp (eg.: new Date().getTime())
if (typeof date === 'number') {
return new Date(date);
}
return new Date();
},
// date - Date object
// output function should return string
output(date) {
return luxon.DateTime.fromJSDate(date)
.toFormat('yyyy LLL dd');
}
}
...
highlightedDays 1.1.4+
Type: Array
Default: []
Highlight days. Can contains array with range:
Eg: [ [‘2019-01-01’, ‘2019-01-10’], ‘2019-01-31’ ].
Can contains Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option highlightedDaysFormat
).
highlightedDaysFormat 1.1.4+
Type: String
Default: "YYYY-MM-DD"
Date format for option highlightedDays
.
inlineMode
Type: Boolean
Default: false
Show calendar inline.
lang
Type: String
Default: "en-US"
Language. This option affect to day names, month names via Date.prototype.toLocaleString() and also affect to plural rules via Intl.PluralRules.
lockDays
Type: Array
Default: []
Disable days for select. Can contains array with range:
Eg: [ [‘2019-01-01’, ‘2019-01-10’], ‘2019-01-31’ ].
This example will disable range from 01 Jan 2019 to 10 Jan 2019 and 31 Jan 2019.
Can contains Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option lockDaysFormat
).
lockDaysFilter 2.0.0+
Type: Function
Default: null
Lock days by custom function. Examples:
...
lockDaysFilter: (date1, date2, pickedDates) => {
// define your condition
//
// date1 - start date or day of render (DateTime)
// date2 - end date (DateTime)
// pickedDates - number of selected days (Number)
//
// this function calling on render and after apply
// thus, you need to check pickedDates.length, if it is:
// 0 - no dates selected
// 1 - selected start date
// 2 - selected start and end dates
//
// function should return Boolean, when true - day locked
}
...
Example for disabled weekends:
...
lockDaysFilter: (day) => {
const d = day.getDay();
return [6, 0].includes(d);
},
...
If you want to disallow locked days in a range, you must check the range yourself.
Example for disabled weekends.
...
// enable option to trigger check
disallowLockDaysInRange: true,
// check locked days yourself
lockDaysFilter: (date1, date2, pickedDates) => {
if (!date2) {
const d = date1.getDay();
return [6, 0].includes(d);
}
while (date1.toJSDate() < date2.toJSDate()) {
const day = date1.getDay();
isWeekend = [6, 0].includes(day);
if (isWeekend) { return true; }
date1.add(1, 'day');
}
return false;
}
...
date1, date2 is DateTime object.
lockDaysFormat
Type: String
Default: "YYYY-MM-DD"
Date format for option lockDays.
lockDaysInclusivity 1.0.22+
Type: String
Default: "[]"
A [
indicates inclusion of a value. A (
indicates exclusion. If the inclusivity parameter is used, both indicators must be passed.
maxDate
Type: Date | Number | String
Default: null
The maximum/latest date that can be selected.
Date Object or Unix Timestamp (with milliseconds) or ISO String.
maxDays
Type: Number
Default: null
The maximum days of the selected range.
minDate
Type: Date | Number | String
Default: null
The minimum/earliest date that can be selected.
Date Object or Unix Timestamp (with milliseconds) or ISO String.
minDays
Type: Number
Default: null
The minimum days of the selected range.
numberOfColumns
Type: Number
Default: 1
Number of columns months.
numberOfMonths
Type: Number
Default: 1
Number of visible months.
parentEl
Type: HTMLElement
Default: null
Adds the date picker to an element.
position 2.0.5+
Type: String
Default: "auto"
A space-separated string consisting of one or two of left
or right
, top
or bottom
, and auto
(may be omitted).
For example:
top left
- calendar will be displayed above the element.bottom
- calendar will be displayed below the element and horizontal orientation will be default toauto
.right
- vertical orientation will default toauto
.
resetButton 2.0.0+
Type: Boolean | Function
Default: null
Adds a reset button to clear the current selection.
...
resetButton: true,
...
OR
...
// Do not need call clear selection inside this function.
// function should return HTML element
resetButton: () => {
let btn = document.createElement('button');
btn.innerText = 'Clear';
btn.addEventListener('click', (evt) => {
evt.preventDefault();
// some custom action
});
return btn;
},
...
scrollToDate
Type: Boolean
Default: true
Scroll to start date on open.
selectBackward
Type: Boolean
Default: false
Select second date before the first selected date.
selectForward
Type: Boolean
Default: false
Select second date after the first selected date.
showTooltip
Type: Boolean
Default: true
Showing tooltip with how much days will be selected.
showWeekNumbers
Type: Boolean
Default: false
Show week numbers. Based on option firstDay
.
singleMode
Type: Boolean
Default: true
Choose a single date instead of a date range.
splitView
Type: Boolean
Default: true
Enable the previous and the next button for each month.
startDate
Type: Date | Number | String
Default: null
Preselect date.
If option singleMode
is disabled then endDate
must be set too.
Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format
).
switchingMonths 2.0.0+
Type: Number
Default: null
Indicates whether the date range picker should switch months by this value, instead of value of numberOfMonths
.
tooltipNumber 2.0.0+
Type: Function
Default: null
...
// totalDays - number of selected days
// function should return Number
//
// shows one day less
tooltipNumber: (totalDays) => {
return totalDays - 1;
}
...
tooltipText
Type: Object
Default: {"one":"day","other":"days"}
Text for the tooltip.
Keys depends on option lang (see Intl.PluralRules).
zIndex
Type: Number
Default: 9999
Control zIndex of the picker element.
Deprecated anyBookedDaysAsCheckout
Type: Boolean
Default: false
Allow to select any booked days as check-out.
Reason: Since v2.0.0 added option lockDaysFilter
.
Replacement:
...
lockDaysFilter: (date1, date2, pickedDates) => {
if (pickedDates.length < 1) {
// this example will disable weekends
// define your own condition for indicate locked days
const d = date1.getDay();
return [6, 0].includes(d);
}
return false;
},
...
Deprecated bookedDays
Type: Array
Default: []
Disable days for select. Can contains array with range:
Eg: [ [‘2019-01-01’, ‘2019-01-10’], ‘2019-01-31’ ].
This example will disable range from 01 Jan 2019 to 10 Jan 2019 and 31 Jan 2019.
Can contains Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option bookedDaysFormat).
Unlike the option lockDays:
check-in date can be selected as check-out check-out date can be selected as check-in Eg: you have bookedDays: [[‘2020-01-10’, ‘2020-01-20’]], ‘2020-01-10’ is allowing to select as check-out, ‘2020-01-20’ is allow to select as check-in.
Replacement:
use lockDays
instead of bookedDays
.
Deprecated bookedDaysFormat
Type: String
Default: "YYYY-MM-DD"
Date format for option bookedDays.
Replacement:
use lockDaysFormat
instead of bookedDaysFormat
.
Deprecated bookedDaysInclusivity
Type: String
Default: "[]"
A [ indicates inclusion of a value. A ( indicates exclusion. If the inclusivity parameter is used, both indicators must be passed.
Replacement:
use lockDaysInclusivity
instead of bookedDaysInclusivity
.
Deprecated disableWeekends
Type: Boolean
Default: false
Disable Saturday and Sunday.
Reason: Since v2.0.0 added option lockDaysFilter
.
Replacement:
...
lockDaysFilter: (day) => {
const d = day.getDay();
return [6, 0].includes(d);
},
...
Deprecated disallowBookedDaysInRange
Type: Boolean
Default: false
Prevent to select date ranges with booked dates.
Throw error «INVALID_RANGE» in the event onError.
Replacement:
use disallowLockDaysInRange
instead of disallowBookedDaysInRange
.
Deprecated hotelMode
Type: Boolean
Default: false
Tooltip will shown nights count instead of days.
Also required to edit option tooltipText.
from v1.0.22 when is true also changing this options:
bookedDaysInclusivity: ‘[)’ (allowing to select check-out date as check-in date)
disallowBookedDaysInRange: true
selectForward: true
You can overwrite them if you manually set some of these options.
Reason: The option hotelMode
is misleading because there many cases for each hotel.
Replacement:
Use option lockDaysFilter
and control the behavior you want and use option tooltipNumber (see example in tooltipNumber
description).
Deprecated mobileFriendly
Type: Boolean
Default: true
Enable mobile friendly.
In portrait orientation, 1 calendar will be displayed at the bottom of the screen.
In landscape orientation 2 calendar will be displayed.
See demo above.
Reason: Since v2.0.0 added plugin mobilefriendly
.
Deprecated moduleNavKeyboard
Type: Boolean
Default: null
Adds keyboard navigation.
Reason: Since v2.0.0 added plugin keyboardnav
.
Deprecated moduleRanges
Type: Boolean
Default: null
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.
When is true will use default ranges (Today, Yesterday, Last 7 Days, Last 30 Days, This Month, Last Month).
Reason: Since v2.0.0 added plugin ranges
.
Deprecated moveByOneMonth
Type: Boolean
Default: false
Indicates whether the date range picker should switch month one by one, instead of value of numberOfMonths.
Reason: Since v2.0.0 added new option switchingMonths
.
Replacement:
...
switchingMonths: 1,
...
Deprecated resetBtnCallback
Type: Boolean
Default: false
useResetBtn must be at true.
This function is call when the reset button is click.
By default it will call the clearSelection method.
Reason: Since v2.0.0 added new option resetButton
.
Replacement:
...
resetButton: true,
...
OR
...
resetButton: (picker) => {
let b = document.createElement('button');
b.innerText = 'Clear';
b.addEventListener('click', (evt) => {
evt.preventDefault();
// some custom action
});
return b;
},
...
Deprecated useResetBtn
Type: Boolean
Default: false
Adds a reset button to clear the current selection.
Reason: Since v2.0.0 added new option resetButton
.
Replacement:
...
resetButton: true,
...
OR
...
resetButton: (picker) => {
let b = document.createElement('button');
b.innerText = 'Clear';
b.addEventListener('click', (evt) => {
evt.preventDefault();
// some custom action
});
return b;
},
...