NGX-Bootstrap Datepicker, когда я открываю его на своем iPad, он не выбирает дату при первом нажатии

Question

Я использую NGX-Bootstrap DatePicker Когда я открываю его на вкладке или на мобильном устройстве (все устройства, кроме настольного компьютера и ноутбука). Мне нужно нажать на дату два раза, чтобы выбрать. Как решить эту проблему

Для демонстрации откройте (https://valor -software.com / ngx-bootstrap / # / datepicker ) в TAB или MOBILE

Answer 1

Я столкнулся с той же проблемой вчера. Это проблема устройств Apple, возникающая из-за того, что устройство обнаруживает первое касание пользователя, как при наведении, вместо щелчка.

Чтобы решить эту проблему, я использую внутри входного события событие, которое я вызываю с помощью указателя даты ngx-bootstrap для выполнения метода при отображении календаря, например:

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

и внутри метода onShownPickerМой алгоритм определяет, находится ли пользователь внутри устройства Apple, а затем использует метод ngxbootstrap-datepicker для экземпляра dayHandler (который вызывается при обычном обнаружении щелчка вместо зависания):

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;