Predefined ranges plugin

Adds predefined ranges.

Litepicker version 2.0.0 or higher is required.

Installation

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
// include plugin after Litepicker
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/ranges.js"></script>

If you’re using a bundler, e.g. webpack, you’ll need to import Litepicker first.

import Litepicker from 'litepicker';
import 'litepicker/dist/plugins/ranges';

Now you can create Litepicker instance with plugin:

<script>
const picker = new Litepicker({ 
  element: document.getElementById('litepicker'),
  plugins: ['ranges']
});
</script>

Options

position

Type: String

Default: left

Ranges block position.
Possible values: left, top, right, bottom.

Example:

const picker = new Litepicker({ 
  element: document.getElementById('litepicker'),
  plugins: ['ranges'],
  ranges: {
    position: 'left'
  }
});

customRanges

Type: Object

Default: { _default_ranges_ }

Define your own ranges.
Default ranges is: Today, Yesterday, Last 7 days, Last 30 days, This month, Last month.

Example:

const picker = new Litepicker({ 
  element: document.getElementById('litepicker'),
  plugins: ['ranges'],
  ranges: {
    customRanges: {
      'New range': [new Date('2020-11-19'), new Date()] // first start date then end date.
    }
  }
});

force ^2.0.5+

Type: Boolean

Default: false

When true ignores locked days and selects a date range.

Example:

const picker = new Litepicker({ 
  element: document.getElementById('litepicker'),
  plugins: ['ranges'],
  ranges: {
    force: true
  }
});

autoApply ^2.0.10+

Type: Boolean

Default: true

Automatically apply a new date range as soon as ranges are clicked.
By default equal to autoApply from Litepicker options.

Example:

const picker = new Litepicker({ 
  element: document.getElementById('litepicker'),
  plugins: ['ranges'],
  ranges: {
    autoApply: true
  }
});

Events:

ranges.preselect ^2.0.10+

Arguments: (date1, date2)

date1, date2 is DateTime object.

Event is called on select days by ranges (when autoApply is false).

...
setup: (picker) => {
  picker.on('ranges.preselect', (date1, date2) => {
    // some action
  });
},
...

ranges.selected ^2.0.10+

Arguments: (date1, date2)

date1, date2 is DateTime object.

Event is called when ranges is submitted.

...
setup: (picker) => {
  picker.on('ranges.selected', (date1, date2) => {
    // some action
  });
},
...

new Litepicker({
  element: document.getElementById('datepicker'),
  singleMode: false,
  plugins: ['ranges']
})