Question

我正在使用NGX-Bootstrap DatePicker 当我在标签页或移动设备（除台式机和笔记本电脑以外的所有设备）中打开它时，我需要点击两次日期以进行选择。如何解决这个问题

对于演示，请在TAB或MOBILE中打开（https://valor-software.com/ngx-bootstrap/#/datepicker）

Answer 1

昨天我遇到了同样的问题。这是Apple设备出现的问题，因为它可以检测到用户的第一次触摸（如悬停）而不是点击，因此发生。

要解决此问题，我会在输入中使用一个事件，该事件会在显示日历时调用ngx-bootstrap datepicker来执行方法，例如：

<input type="text" bsDaterangepicker  (onShown)="onShowPicker($event)">

在onShownPicker方法中，我的算法正在检测用户是否在苹果设备内，然后，它使用ngxbootstrap-datepicker方法来实例化dayHandler（通常在检测到单击时调用，而不是将鼠标悬停时调用）： / p>

onShowPicker(event) {
    const dayHoverHandler = event.dayHoverHandler;
    const hoverWrapper = (hoverEvent) => {
        const { cell, isHovered } = hoverEvent;

        if ((isHovered &&
          !!navigator.platform &&
          /iPad|iPhone|iPod|Apple/.test(navigator.platform)) &&
          'ontouchstart' in window
        ) {
            (this.datapickerDirective as any)._datepickerRef.instance.daySelectHandler(cell);
        }

        return dayHoverHandler(hoverEvent);
    };
    event.dayHoverHandler = hoverWrapper;
}

要正常工作，您需要将datepicker指令设置为viewChild，因为它已在上面的此方法中使用。就我而言，我使用的是这样：

@ViewChild(BsDaterangepickerDirective, {static: false}) datapickerDirective;

当我在ipad上打开NGX-Bootstrap Datepicker时，第一次单击时未选择日期

1 个答案: