Litepicker

Date range picker - lightweight, no dependencies

Star Fork Github

options: {

}

See all options below.


# Installation

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.


# Usage

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.

<script> var picker = new Litepicker({ element: document.getElementById('litepicker') }); </script>

# No CSS version

To prevent the inclusion of the CSS styles tag in the head, you can define a global variable before initializing Litepicker:

window.disableLitepickerStyles = true; let picker = new 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>

# Options
option
type
default
description
element (required)
HTMLElement
null
Bind the datepicker to a element. Also is possible to bind to any element (not input) for example you need inline calendar.
elementEnd
HTMLInputElement
null

Bind the datepicker to a element for end date.

Usage example.

parentEl
HTMLElement
null
Adds the date picker to an element.
firstDay
Number
1
Day of start week. (0 - Sunday, 1 - Monday, 2 - Tuesday, etc...)
format
String
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

lang
String
en-US
Language. This option affect to day names, month names via Date.prototype.toLocaleString() and also affect to plural rules via Intl.PluralRules.
delimiter

from v1.5.0

String
-

Delimiter between dates.

numberOfMonths
Number
1
Number of visible months.
numberOfColumns
Number
1
Number of columns months.
startDate
Date|Number|String
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).

endDate
Date|Number|String
null

Preselect end date. Required startDate.

Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).

zIndex
Number
9999
Control zIndex of the picker element.
minDate
Date|Number|String
null

The minimum/earliest date that can be selected.

Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).

maxDate
Date|Number|String
null

The maximum/latest date that can be selected.

Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).

minDays
Number
null

The minimum days of the selected range.

When hotelMode is on, minDays works like nights.

maxDays
Number
null

The maximum days of the selected range.

When hotelMode is on, maxDays works like nights.

selectForward
Boolean
false
Select second date after the first selected date.
selectBackward
Boolean
false
Select second date before the first selected date.
splitView
Boolean
false
Enable the previous and the next button for each month.
inlineMode
Boolean
false
Show calendar inline.
singleMode
Boolean
true
Choose a single date instead of a date range.
autoApply
Boolean
true
Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
allowRepick
Boolean
false

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.

showWeekNumbers
Boolean
false
Show week numbers. Based on option firstDay.
showTooltip
Boolean
true
Showing tooltip with how much days will be selected.
hotelMode
Boolean
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.

disableWeekends
Boolean
false
Disable Saturday and Sunday.
scrollToDate
Boolean
true
Scroll to start date on open.
mobileFriendly
Boolean
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.

useResetBtn
Boolean
false

Adds a reset button to clear the current selection.

autoRefresh
Boolean
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.

moveByOneMonth

from v1.3.0

Boolean
false

Indicates whether the date range picker should switch month one by one, instead of value of numberOfMonths.

lockDaysFormat
String
YYYY-MM-DD
Date format for option lockDays.
lockDays
Array
[]

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).

disallowLockDaysInRange
Boolean
false

Prevent to select date ranges with locked dates.

Throw error «INVALID_RANGE» in the event onError.

lockDaysInclusivity

from v1.0.22

String
[]

A [ indicates inclusion of a value. A ( indicates exclusion. If the inclusivity parameter is used, both indicators must be passed.

bookedDaysFormat
String
YYYY-MM-DD
Date format for option bookedDays.
bookedDays
Array
[]

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:

  • 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.

disallowBookedDaysInRange

from v1.0.22

Boolean
false

Prevent to select date ranges with booked dates.

Throw error «INVALID_RANGE» in the event onError.

bookedDaysInclusivity

from v1.0.22

String
[]

A [ indicates inclusion of a value. A ( indicates exclusion. If the inclusivity parameter is used, both indicators must be passed.

anyBookedDaysAsCheckout

from v1.0.22

Boolean
false

Allow to select any booked days as check-out.

highlightedDaysFormat

from v1.1.4

String
YYYY-MM-DD
Date format for option highlightedDays.
highlightedDays

from v1.1.4

Array
[]

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).

dropdowns

from v1.0.21

Object
{ 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().

from v1.4.7
years can be equal to asc string to change the sort direction.

buttonText
Object
{ apply: 'Apply', cancel: 'Cancel', previousMonth: '<svg .../></svg>', nextMonth: '<svg .../></svg>', reset: '<svg .../></svg>', }
Text for buttons.
tooltipText
Object
{ one: 'day', other: 'days', }

Text for the tooltip.

Keys depends on option lang (see Intl.PluralRules).

resetBtnCallback
Function
null

useResetBtn must be at true.

This function is call when the reset button is click.

By default it will call the clearSelection method.

moduleRanges

from v1.3.0

Boolean|Object
null

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 } }

moduleNavKeyboard

from v1.3.4

Boolean|Object
null

Works with litepicker-module-navkeyboard

Adds keyboard navigation.


# Events
name
default
description
onShow
null

Trigger on show the picker.

Example: onShow: function() { console.log('show'); }

onHide
null

Trigger on hide the picker.

Example: onHide: function() { console.log('hide'); }

onSelect
null

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

onError
null

Trigger on error date/date range.

Example: onError: function(error) { console.log(error); }

At the moment works only with option disallowLockDaysInRange.

onRender
null

Trigger after the render of the picker.

Example: onRender: function(element) { console.log('picker element', element); }

onRenderDay
null

Trigger after rendering a day item.

Example: onRenderDay: function(element) { console.log('day element', element); }

onChangeMonth
null

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.

onChangeYear
null

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.

onDayHover
null

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.).

onShowTooltip

from v1.5.4

null

Trigger on show tooltip the picker.

Example: onShowTooltip: function(tooltip, dayElement) { console.log(tooltip, dayElement); }


# Methods
name
arguments
description
show
-

Make the picker visible.

hide
-

Hide the picker.

getDate
-

Alias of getStartDate.

getStartDate
-

Return current start of date range as Date Object.

getEndDate
-

Return current end of date range as Date Object.

setDate
date

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).

setDateRange
date1, date2

Set date range.

date1, date2 is should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).

setLockDays
array

Set lock days.

See options lockDays for format information.

setBookedDays
array

Set booked days.

See options bookedDays for format information.

setHighlightedDays
array

Set highlighted days.

See options highlightedDays for format information.

gotoDate
date, idx?

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.

setOptions
Object

Set new options to the picker.

Options element, elementEnd, parentEl cannot be changed.

clearSelection
-

Clear selection.

destroy
-

Destroy the picker.


# IE11

To support IE11 you need to include polyfill ie11CustomProperties.

Example:

<--- include polyfill first ---> <script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/npm/ie11-custom-properties@latest/ie11CustomProperties.js"><\x2fscript>');</script> <--- then include the Litepicker library ---> <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/js/main.js"></script>

# Customize colors

See predefined colors in main.scss.

You can override them with !important.

Example:

<style> :root { --litepickerDayIsStartBg: #f68e6b !important; } </style>

This example will change background color of the start date.


# License

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.


# Comments