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