I am using the easepick plugin to provide my users with a method to choose a date range. But I am struggling to get an event to fire when the data range is chosen. Anyone who can help with solving this problem?
enableEasepick = function() {
const picker = new easepick.create({
element: document.getElementById('datepicker'),
grid: 2,
zIndex: "1000",
calendars: 2,
css: [
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css'
],
plugins: ['RangePlugin', 'LockPlugin'],
RangePlugin: {
tooltipNumber(num) {
return num - 1;
},
locale: {
one: 'night',
other: 'nights',
},
},
LockPlugin: {
minDate: new Date(),
minDays: 2,
inseparable: true,
},
autoApply: true,
});
};
The following does not work:
var input = document.getElementById('datepicker');
input.addEventListener("change", function() {
});
2
Answers
On the second line
"const picker = new easepick.create({"
You forgot to add the second ).
Standard event handlers like
change
will only fire if the field value was changed directly by the user – not if any script sets the value.You need to use the custom events provided by this library – https://easepick.com/packages/core.html#events
That’s probably the one you want here.