Search code examples
javascriptdatepickerdaterangepicker

There any Events for Vanilla JS Range Datepicker?


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>