Multiselect plugin

Adds multiple selection.

Litepicker version 2.0.2 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/multiselect.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/multiselect';

Now you can create Litepicker instance with plugin:

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

Options

max

Type: Number

Default: null

Optional. Limits the maximum number of days selected.

Example:

new Litepicker({
  element: document.getElementById('datepicker'),
  plugins: ['multiselect']
  multiselect: {
    max: 5,
  },
})

Events

multiselect.select

Arguments: (date)

date is DateTime object.

Event is called after select day.

...
setup: (picker) => {
  picker.on('multiselect.select', (date) => {
    // some action
  });
},
...

multiselect.deselect

Arguments: (date)

date is DateTime object.

Event is called after deselect day.

...
setup: (picker) => {
  picker.on('multiselect.deselect', (date) => {
    // some action
  });
},
...

Methods

clearMultipleDates

Arguments: ()

Return: void

Clear selections.

getMultipleDates

Arguments: ()

Return: DateTime[]

Return selected days as DateTime Objects.

multipleDatesToString

Arguments: (format, delimiter)

Return: String

format is optional, default is YYYY-MM-DD. Allowed formats see in format option of Litepicker. delimiter is optional, default is ,.

Return selected days as string.

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