[英]Manually closing the p-calendar datepicker
I am using PrimeNg <p-calendar>
and have [touchUI]="true"
and [showTime]="true"
我正在使用PrimeNg <p-calendar>
并具有[touchUI]="true"
和[showTime]="true"
This brings up a datePicker with an overlay blocking out the rest of the webpage. 这将显示带覆盖层的datePicker,从而阻止了网页的其余部分。 All this works fine. 所有这些都很好。 Except after a date and time are picked the only way to close the datePicker and remove the overlay is to click outside of the datePicker. 除了选择日期和时间之后,关闭datePicker并删除覆盖的唯一方法是在datePicker外部单击。 What I need is a place for the user to click to close the datePicker and remove the overlay. 我需要一个供用户单击以关闭datePicker并除去覆盖层的地方。
I have a button by including <p-footer>
I was also able to use a @ViewChild
decorator to access to the overlayVisible property and manually set it to false. 通过包含<p-footer>
我有了一个按钮,我也能够使用@ViewChild
装饰器来访问overlayVisible属性并将其手动设置为false。
This does close the datePicker, but unfortunately it leaves the overlay blocking the entire page until it is refreshed. 这确实关闭了datePicker,但是不幸的是,它使覆盖层阻塞了整个页面,直到刷新为止。
I'm sure this is a simple fix, but it has me stumped. 我敢肯定这是一个简单的解决方法,但这让我很困惑。
In my component 在我的组件中
@ViewChild('myCalendar') datePicker;
close() {
this.datePicker.overlayVisible = false;
}
html 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>
was facing the same issue and tried all the suggestions mentioned, but none worked for me. 正面临着同样的问题,并尝试了所有提及的建议,但没有一个对我有用。 After hacking around, the following worked for me :) 黑客入侵后,以下内容对我有用:)
<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>
Set datepckerClick
to true
将datepckerClick
设置为true
close() {
this.datePicker.overlayVisible = false;
this.datePicker.datepickerClick = true;
}
Sorry for my late answer, but I already saw that you had the same problem as I did. 抱歉,我的回答很晚,但是我已经看到您遇到的问题和我一样。 I only had to do the same thing with p-multiselect
. 我只需要对p-multiselect
做同样的事情。
I solved this by adding $event.stopPropagation()
next to the click function close()
. 我通过在click函数close()
旁边添加$event.stopPropagation()
来解决此问题。 The dropdown was not closing because <p-footer>
is inside the dropdown, so you have to exclude from parent click event
. 下拉菜单未关闭,因为<p-footer>
位于下拉菜单中,因此您必须从父click event
排除它。 So, in general, this is what it looks like: 因此,通常是这样的:
HTML 的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>
Your component as it is: 您的组件是这样的:
@ViewChild('myCalendar') datePicker;
close() {
this.datePicker.overlayVisible = false;
}
Hope this helps someone! 希望这对某人有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.