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());
 });

Can someone please help how to use the customevent trigger.

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.

• javascript
• datepicker

• 1 1/2 … Has the OP read the API doc to DatePicker events? There it is stated that ... "All Datepicker-event objects are CustomEvent instances and dispatched to the associated <input> element". Furthermore the event names are listed, 4 'change*' events and 'show'/'hide'. It also says that the data (4 properties) the OP might be interested in is part of event.detail of the event objects which is passed into the event handler (callback function). – Peter Seliger Commented Oct 18, 2021 at 13:54
• 3 2/2 ... Thus the registry process for e.g. a 'changeDate' event for the OP's elem with an anonymous callback function according to the above quoted API should look like this ... elem.addEventListener('changeDate', function (evt) { console.log(evt.detail.date); console.log(evt.detail.datepicker === datepicker); }); – Peter Seliger Commented Oct 18, 2021 at 14:00
• Thank you!! it's working. – DataConnect Commented Oct 18, 2021 at 14:02

1 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 );
    }