如何在 primeng p-calendar 控件中对视图和日期格式属性应用条件？

Question

我必须在 turbo table 行上使用 prime-ng p-calendar，它可以有两种不同的日期格式 - mm/yy 和 mm/dd/yy，具体取决于期间字段值。现在，我已经添加了两次此控件并根据句点字段条件呈现控件，如下所示。

<p-calendar *ngIf="Period.length == 15" name="period"
  id="period"
  selectionMode="range"
  view="month"
  appendTo="body"
  dataType="string"
  formControlName="period"
  [showIcon]="true"
  [monthNavigator]="true"
  [yearNavigator]="true" 
  [dateFormat]="mm/yy"
  placeholder="Choose">
</p-calendar>

<p-calendar *ngIf="Period.length == 20" name="period"
  id="period"
  selectionMode="range"
  view="date"
  appendTo="body"
  dataType="string"
  formControlName="period"
  [showIcon]="true"
  [monthNavigator]="true"
  [yearNavigator]="true"  
  dateFormat="mm/dd/yy"
  placeholder="Choose">
 </p-calendar>

我的问题是如何使用一个适用于两种日期格式的控件？我知道我需要在视图和 dateFormat 属性上应用条件，但我无法使其工作。

Answer 1

您可以绑定值并在您的 dateFormat 中使用 ternary operator。基本上你将 dateFormat 绑定到某个条件，在这种情况下可能是一个三元组（你可以根据需要链接任意多个，但代码可能会很快变得不可读）。

代码将如下所示：

<p-calendar 
  name="period"
  id="period"
  selectionMode="range"
  view="date"
  appendTo="body"
  dataType="string"
  formControlName="period"
  [showIcon]="true"
  [monthNavigator]="true"
  [yearNavigator]="true"  
  [dateFormat]="
  Period.length == 20 ? 'mm/dd/yy' : 
  Period.length == 15 ? 'mm/yy' : 
  'default value'"
  placeholder="Choose">
 </p-calendar>

如果 Period 没有长度或长度与这些值中的任何一个不同，请确保提供一些默认值。如果条件确实取决于它的值，那么在视图的组件初始化时 Period 不应该是未定义的。

如何在 primeng p-calendar 控件中对视图和日期格式属性应用条件？

How to apply condition on view and dateFormat attribute on prime ng p-calendar control?

calendar

primeng

angular

primeng-turbotable