使用 Primeng 显示日期选择器答案

【问题标题】：Displaying Datepickers with Primeng使用 Primeng 显示日期选择器
【发布时间】：2019-07-09 01:42:19
【问题描述】：

自从将我的应用程序升级到 Angular 7 后，我的 Primeng 日期选择器一直没有工作。当我单击相应的字段时，日期选择器不显示，并且我无法通过键盘输入日期。

my.component.html

<label>Start Date:</label>
<p-calendar 
    [(ngModel)]="filterStartDate" 
    inputStyleClass="pCalendarInput" 
    [yearNavigator]="true"
    yearRange="2000:2030"
    [readonlyInput]="true"
    #startDate>
</p-calendar>

这里有我遗漏的步骤吗？ Primeng 7.1.3 与 Angular 7.2.0 一起安装。我现在不想升级到 Angular 8。我已经在 app.module.ts 中导入了 CalendarModule。

【问题讨论】：

标签： angular primeng

【解决方案1】：

我依赖于已弃用的样式依赖项。要保持正确的样式依赖关系，请在 index.html 中包含以下内容：

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

这解决了我的问题。

【讨论】：

【解决方案2】：

您已将[readonlyInput]="true" 添加到'false'

<p-calendar 
    [(ngModel)]="filterStartDate" 
    inputStyleClass="pCalendarInput" 
    [yearNavigator]="true"
    yearRange="2000:2030"
    [readonlyInput]="false"  <===== false , for entering through keyboard
    #startDate>
</p-calendar>

欲了解更多信息：https://www.primefaces.org/primeng/#/setup

【讨论】：