See all options below.
Installing a Litepicker module
npm i litepicker
Non-module environments
<script src="https://cdn.jsdelivr.net/npm/litepickeropendays/dist/js/main.js"></script>
If you’re using a bundler, e.g. webpack, you’ll need to import Litepicker.
import * as Litepicker from 'litepicker';
import Litepicker from 'litepicker';
Now you can create Litepicker instance.
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 |
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).
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.
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).
enable open mode
Eg: [ ['2019-01-01', '2019-01-10'], '2019-01-31' ].
This example will enable 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).
enable days for select. Can contains array with range:
Eg: [ ['2019-01-01', '2019-01-10'], '2019-01-31' ].
This example will enable 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.0.21
maxYear is null then maxYear will be equal to
(new Date()).getFullYear().
Text for the tooltip.
Keys depends on option lang (see Intl.PluralRules).
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 avaiable 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() { console.log('rendered'); }
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.
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 open days.
See options openDays for format information.
Set booked days.
See options bookedDays 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.
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.