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.

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.

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:

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 to auto.
• right - vertical orientation will default to auto.

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;
},
...