vanillajs-datepicker在点击(更改)时获取日期

Question

当我点击日历日期(更改)时，我试图获得日期。医生说有一个触发点。但不能让它工作。我做了一个自定义的事件监听器'click'，但是它会触发整个日历。

所有的Datepicker-event对象都是CustomEvent实例，并且分派给相关的元素(对于inline picker, block元素)。

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

谁能告诉我如何使用customevent触发器。

Answer 1

下面是一个为Date Range选择器添加事件的工作示例(假设我们使用面向对象编程(类))，必须将changeDate事件应用于每个输入元素。请注意，由于我使用的是日期范围选择器，所以我有两个输入，但在您的情况下，您可能只使用单个输入的日期选择器。

。dateRangePicker = new dateRangePicker。dateRangeEl, {clearBtn:没错,});

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