Закрытие даты в p-календаре вручную - PullRequest
Новая
       6

Закрытие даты в p-календаре вручную

0 голосов
/ 07 ноября 2018

Я использую PrimeNg <p-calendar> и имею [touchUI]="true" и [showTime]="true"

Это вызывает DatePicker с наложением, блокирующим остальную часть веб-страницы. Все это прекрасно работает. За исключением случаев, когда выбраны дата и время, единственный способ закрыть DatePicker и удалить наложение - щелкнуть за пределами DatePicker. Что мне нужно, так это место, где пользователь может щелкнуть, чтобы закрыть DatePicker и удалить оверлей.

У меня есть кнопка, включающая <p-footer> Я также смог использовать декоратор @ViewChild для доступа к свойству overlayVisible и вручную установить для него значение false.

Это закрывает DatePicker, но, к сожалению, оставляет наложение, блокирующее всю страницу, до тех пор, пока оно не обновится.

Я уверен, что это простое исправление, но оно поставило меня в тупик.

В моем компоненте 

@ViewChild('myCalendar') datePicker;

close() {
  this.datePicker.overlayVisible = false;
}

HTML 

<p-calendar #myCalendar
  formControlName="tsClockIn"
  [showIcon]="true"
  [touchUI]="true"
  [showTime]="true">
  <p-footer>
    <button pButton type="button" label="Close" (click)="close()"></button>
  </p-footer>
</p-calendar>

Ответы [ 3 ]

0 голосов
/ 13 ноября 2018

Извините за мой поздний ответ, но я уже видел, что у вас была такая же проблема, как и у меня. Мне нужно было сделать то же самое только с p-multiselect.

Я решил это, добавив $event.stopPropagation() рядом с функцией щелчка close(). Раскрывающийся список не закрывался, потому что <p-footer> находится внутри раскрывающегося списка, поэтому вы должны исключить из родительского click event. В общем, вот как это выглядит:

HTML 

    <p-calendar #myCalendar
      formControlName="tsClockIn"
      [showIcon]="true"
      [touchUI]="true"
      [showTime]="true">
     <p-footer>
       <button pButton type="button" label="Close" (click)="close();$event.stopPropagation()"></button>
     </p-footer>
   </p-calendar>


Ваш компонент как есть: 

@ViewChild('myCalendar') datePicker;

close() {
  this.datePicker.overlayVisible = false;
}

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 17 апреля 2019

столкнулся с той же проблемой и перепробовал все упомянутые предложения, но ни один не помог мне. После взлома у меня сработало следующее:) 

        <p-calendar monthNavigator="true" showTime="true"
                    [minDate]="minDate"
                    [readonlyInput]="true"
                    [showIcon]="true"
                    formControlName="departDate"
                    touchUI=true
                    #calendar
                    required>
            <p-footer>
                <button pButton type="button" label="Close" 
                   (click)="calendar.hideOverlay()">
                </button>
            </p-footer>
        </p-calendar>
0 голосов
/ 07 ноября 2018

Установить datepckerClick на true

close() {
  this.datePicker.overlayVisible = false;
  this.datePicker.datepickerClick = true;
}
...