I'm using Vanilla JS Range Datepicker in my project and can't understand - is it real to use any events, which are available for DataPicker, for Range DataPicker?
Any of my attempts lead to errors.
As example code below.
const elem = document.getElementById('foo');
const rangepicker = new DateRangePicker(elem, {
autohide: true
});
rangepicker.addEventListener('show', function (e, details) {
console.log('some actions');
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"></script>
<div id="foo">
<input type="text" name="start">
<span>to</span>
<input type="text" name="end">
</div>You should add changeDate event listener to each input
const elem = document.getElementById('foo');
const rangepicker = new DateRangePicker(elem, {
autohide: true
});
const startElem = document.getElementById('start');
const endElem = document.getElementById('end');
startElem.addEventListener('changeDate', function(e) {
console.log('start', e.detail.date);
});
endElem.addEventListener('changeDate', function(e) {
console.log('end', e.detail.date);
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"></script>
<div id="foo">
<input type="text" name="start" id="start">
<span>to</span>
<input type="text" name="end" id="end">
</div>