如何在 Primeng 日历日期选择器中添加“/”以进行手动输入答案

【问题标题】：How to Add '/' in Primeng Calendar Datepicker for manual inputs如何在 Primeng 日历日期选择器中添加“/”以进行手动输入
【发布时间】：2021-02-12 19:22:11
【问题描述】：

我正在尝试使用primeng Calendar 在手动输入中添加斜线。

<p-calendar
   [monthNavigator]="true"
   [yearNavigator]="true"
   yearRange="1950:2021"
   ngModel
   [required]="true" 
   [maxDate]='today'
   [showOnFocus]="false"
   id="date1"
   [showIcon]="true"
   name="date1"
   inputId="date1"
   placeholder="Date Of Birth">
</p-calendar>

【问题讨论】：

我不确定您所说的“添加斜杠”是什么意思。如果您的意思是使用斜杠显示日期（例如 2/14/2021），您可以查看 dateFormat 属性。或者编辑帖子以添加一个示例，说明现在的情况以及您想要实现的目标。
@OlliM 这似乎应该是答案

标签： angular typescript primeng

【解决方案1】：

PrimeNG 日历已支持斜线。

如果它不适合您，也许您已将日历日期格式设置为不带斜线的格式。您也可以在此处显式设置格式

<p-calendar 
  [monthNavigator]="true" 
  [yearNavigator]="true" 
  yearRange="1950:2021" 
  ngModel  
  [required]="true" 
  [maxDate]='today' 
  [showOnFocus]="false" 
  id="date1" 
  [showIcon]="true"  
  name="date1" 
  inputId="date1" 
  placeholder="Date Of Birth" 
  dateFormat="dd/mm/yy">
</p-calendar>

-- 编辑 --

如果您在 PrimeNG 日历中寻找日期掩码，目前尚不支持。此request 于 2020 年 2 月开放。

您可以使用日期掩码库之一。我在 Angular 7 存储库中使用了 racoon-mask。您可以按如下方式使用它-

npm install --save racoon-mask

app.module.ts

import {PrimeNgCalendarMaskModule} from 'racoon-mask'
...
...
imports:      [ ..., CalendarModule, PrimeNgCalendarMaskModule ]

app.component.html

<p-calendar 
  [monthNavigator]="true" 
  [yearNavigator]="true" 
  yearRange="1950:2021" 
  ngModel  
  [required]="true" 
  [maxDate]='today' 
  [showOnFocus]="false" 
  id="date1" 
  name="date1" 
  inputId="date1" 
  placeholder="Date Of Birth" 
  dateFormat="dd/mm/yy"
  rPCalendarMask>
</p-calendar>
<p>

【讨论】：

我想在有人手动输入日期时自动添加/
我认为您正在寻找的是日期屏蔽。我已经编辑了我的答案，以展示如何将日期屏蔽库与 PrimeNg 日历一起使用。看看这是否有帮助。