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

I have to use prime-ng p-calendar on turbo table rows which can have two different date format - mm/yy and mm/dd/yy depending on period field value. For now, I have added this control twice and rendered control based on period field condition as shown below.

<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>

My question is how can I use one control that works for both date format? I know I need to apply condition on view and dateFormat attribute but I am not able to make it work.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source