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