我正在使用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>
答案 0 :(得分:1)
面临相同的问题,并尝试了所有提到的建议,但没有一个对我有用。黑客入侵后,以下对我有用:)
<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>
答案 1 :(得分:0)
将datepckerClick
设置为true
close() {
this.datePicker.overlayVisible = false;
this.datePicker.datepickerClick = true;
}
答案 2 :(得分:0)
对不起,我的回答很晚,但是我已经看到您遇到的问题和我一样。我只需要对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;
}
希望这对某人有帮助!