There any Events for Vanilla JS Range Datepicker?

Issue

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>

Solution

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>

Answered By – barzin.A

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.