See all options below.
Installing a Litepicker module
npm i litepicker
Non-module environments
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/js/main.js"></script>
You can get a specific version, see jsdelivr docs.
If you’re using a bundler, e.g. webpack, you’ll need to import Litepicker.
import Litepicker from 'litepicker';
If you encounter errors in Typescript, try adding esModuleInterop to your
tsconfig.json. (see issue #53)
Now you can create Litepicker instance.
To prevent the inclusion of the CSS styles tag in the head, you can define a global variable before initializing Litepicker:
Another way you can use version which does not include CSS styles.
import Litepicker from 'litepicker/dist/js/main.nocss';
Non-module environments
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/js/main.nocss.js"></script>
CSS basic styles
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/css/style.css"></script>
Bind the datepicker to a element for end date.
Usage example.
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
from v1.5.0
Delimiter between dates.
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).
Preselect end date. Required startDate.
Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
The minimum/earliest date that can be selected.
Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
The maximum/latest date that can be selected.
Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
The minimum days of the selected range.
When hotelMode is on, minDays works like nights.
The maximum days of the selected range.
When hotelMode is on, maxDays works like nights.
Required elementEnd.
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.
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.
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.
Adds a reset button to clear the current selection.
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.
from v1.3.0
Indicates whether the date range picker should switch month one by one, instead of value of
numberOfMonths.
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).
Prevent to select date ranges with locked dates.
Throw error «INVALID_RANGE» in the event onError.
from v1.0.22
A [ indicates inclusion of a value. A ( indicates exclusion. If the inclusivity
parameter is used, both indicators must be passed.
Disable days for select as start date. 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:
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.
from v1.0.22
Prevent to select date ranges with booked dates.
Throw error «INVALID_RANGE» in the event onError.
from v1.0.22
A [ indicates inclusion of a value. A ( indicates exclusion. If the inclusivity
parameter is used, both indicators must be passed.
from v1.0.22
Allow to select any booked days as check-out.
from v1.1.4
from v1.1.4
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).
from v1.0.21
maxYear is null then maxYear will be equal to
(new Date()).getFullYear().
from v1.4.7
years can be equal to asc
string to change the sort direction.
Text for the tooltip.
Keys depends on option lang (see Intl.PluralRules).
useResetBtn must be at true.
This function is call when the reset button is click.
By default it will call the clearSelection method.
from v1.3.0
Works with litepicker-module-ranges
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).
You can provide your ranges and position, eg:
{ position: 'left', ranges: { your_ranges } }
Works with litepicker-module-navkeyboard
Adds keyboard navigation.Trigger on show the picker.
Example: onShow: function() { console.log('show'); }
Trigger on hide the picker.
Example: onHide: function() { console.log('hide'); }
Trigger on select date/date range.
Example: onSelect: function(date1, date2) { console.log(date1, date2); }
date1 and date2 is Date Object.
date2 is available when the option singleMode is false
Trigger on error date/date range.
Example: onError: function(error) { console.log(error); }
At the moment works only with option disallowLockDaysInRange.
Trigger after the render of the picker.
Example: onRender: function(element) { console.log('picker element', element); }
Trigger after rendering a day item.
Example: onRenderDay: function(element) { console.log('day element', element); }
Trigger on change month.
Example: onChangeMonth: function(date, idx) { console.log(date, idx); }
date is Date Object, idx is Number.
idx is showing which calendar has change when option splitView is enabled.
idx starts from 0.
Trigger on change year.
Example: onChangeYear: function(date, idx) { console.log(date, idx); }
date is Date Object, idx is Number.
idx is showing which calendar has change when option splitView is enabled.
idx starts from 0.
Trigger when user hovers or clicks a day item.
Example:
onDayHover: function(date, attributes) { console.log(date, attributes); }
date is the date object of the currently hovered day item.
attributes is a string array with the day item's css classes (e.g.
is-start-date, is-locked, is-booked, etc.).
from v1.5.4
Trigger on show tooltip the picker.
Example: onShowTooltip: function(tooltip, dayElement) { console.log(tooltip, dayElement); }
Make the picker visible.
Hide the picker.
Alias of getStartDate.
Return current start of date range as Date Object.
Return current end of date range as Date Object.
Set date when singleDate is true.
date is should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
Set date range.
date1, date2 is should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
Set lock days.
See options lockDays for format information.
Set booked days.
See options bookedDays for format information.
Set highlighted days.
See options highlightedDays for format information.
Set month by the date.
date is should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
idx is required when option splitView is enabled.
Set new options to the picker.
Options element, elementEnd, parentEl cannot be changed.
Clear selection.
Destroy the picker.
To support IE11 you need to include polyfill ie11CustomProperties.
Example:
See predefined colors in main.scss.
You can override them with !important.
Example:
This example will change background color of the start date.
The MIT License (MIT)
Copyright 2019 Rinat G.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.