在 ngx-bootstrap daterangepicker 中选择第一个日期时触发事件

Question

我有日期范围选择器<bs-daterangepicker-inline [bsValue]='bsValue' (bsValueChange)="test()"></bs-daterangepicker-inline>。

选择第一个日期时如何触发事件？ bsValueChange 仅在选择两个日期时触发。

Answer 1

不幸的是，ngx-bootstrap daterangepicker 不支持选择第一个日期的事件。你可以在这里找到一个功能请求：https://github.com/valor-software/ngx-bootstrap/issues/3348

在 cmets 中，您还可以找到与此类似的解决方法，您可以自己将事件侦听器添加到 daterangepicker：

const datepicker = this.document.querySelector('bs-daterangepicker-inline-container');
datepicker.addEventListener('click', (event) => {
    const target = event.target as HTMLElement;
    if (target.hasAttribute('bsdatepickerdaydecorator') && !target.classList.contains('disabled')) {
        const monthYearButtons: NodeListOf<HTMLButtonElement> = datepicker
            .querySelector('.bs-datepicker-head')
            .querySelectorAll('.current');

        const clickedDate = moment(
            `${target.innerText} ${monthYearButtons[0].innerText} ${monthYearButtons[1].innerText}`,
            'DD MMMM YYYY',
            'de' // locale of the daterangepicker
        );
    }

    // this is to find out if really the start date was selected
    // (dateRange contains the dates of the bsValueChange event)
    if (!clickedDate.isSame(this.dateRange[1]) || target.classList.contains('select-end')) {
        this.dateRange[0] = clickedDate.toDate();
        this.dateRange[1] = null;
    }
});