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.
Code:
new Litepicker({
element: document.getElementById('datepicker'),
plugins: ['multiselect']
})