vanillajs-datepicker get date on click (change)

Question

I'm trying to get a date when I click on a calendar date (change). The doc says there is a event trigger. But can't get it to work. I made a custom Event Listener 'click' however that's triggering the whole calendar.

All Datepicker-event objects are CustomEvent instances and dispatched to the associated element (for inline picker, the block element).

const elem = document.querySelector('#kalenderdatum');
const datepicker = new Datepicker(elem, {
  calendarWeeks: true,
  todayHighlight: true
});

elem.addEventListener('click', function(){
   console.log('test');
   console.log(datepicker.getDate());
 });

https://mymth.github.io/vanillajs-datepicker/#/api?id=datepicker

Can someone please help how to use the customevent trigger.

Answer 1

Here is a working example to add an event, for the Date Range picker( assuming we are using object-oriented programming ( classes ), The changeDate event must be applied to each of the input elements . Note that since I am using Date range Picker there I have two inputs , but in your case you may be using just a single input for Datepicker.

this.dateRangePicker = new DateRangePicker( this.dateRangeEl, { clearBtn: true, } );

      this.dateRangeInputEls = this.querySelectorAll( 'input' );

    if ( this.dateRangeInputEls.length ) {
        this.dateRangeInputEls.forEach( ( dateInputEl ) => {
            dateInputEl.addEventListener( 'changeDate', ( event ) => this.handleDatesSelection( event ) );
        } );
    }
    
        handleDatesSelection( event ) {
    const dateEl = event.target;
    this.selectedDates = this.dateRangePicker.getDates( 'yyyy-mm-dd' );
    const startDate = this.selectedDates?.[ 0 ] ?? '';
    const endDate = this.selectedDates?.[ 1 ] ?? '';

    console.log( 'this.selectedDates', this.selectedDates );
    }