@if (formControl) {
  <div class="w-edit-calendar-styles p-fluid field">
    @if (showLabel) {
      <w-input-label [label]="label" [required]="required" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [validated]="isRequiredValid()"></w-input-label>
    }
    <p-datepicker class="w-edit-calendar-small" 
      [ngClass]="{'disabled': disabled, 
                  'ng-invalid ng-dirty': formControl.hasError('required') && formControl.touched, 
                  'w-edit-calendar-no-icon' : !showIcon
      }" 
      [formControl]="formControl" 
      placeholder="{{placeholder}}"
      appendTo="body"
      [showIcon]="showIcon"
      [icon]="timeOnly ? 'pi pi-clock' : 'pi pi-calendar'"  
      [showTime]="showTime" 
      [timeOnly]="timeOnly" 
      [showSeconds]="showSeconds" 
      [showIcon]="showIcon" 
      [minDate]="minDate"
      [maxDate]="maxDate" 
      [firstDayOfWeek]="firstDayOfWeek" 
      [dataType]="dataType" 
      [view]="viewType" 
      [dateFormat]="dateFormat"
      [readonlyInput]="readonlyInput" 
      (onSelect)="onValue($event)"
      (onInput)="onInputValue($event)"
      [keepInvalid]="keepInvalid"
    />
    @if (formControl.hasError('required') && formControl.touched) {
      <small class="p-error block">{{requiredErrorDescription}}</small>
    }
    @if (formControl.errors && !formControl.hasError('required') && formControl.touched) {
      <small class="p-error block">{{someErrorDescription}}</small>
    }
  </div>
} @else {
  <div class="w-edit-calendar-styles p-fluid field" [ngClass]="{'displayInlineBlock' : displayInlineBlock}" >
    @if (showLabel) {
      <w-input-label [label]="label" [required]="required" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [validated]="isRequiredValid()"></w-input-label>
    }
    <p-datepicker class="w-edit-calendar-small" 
      [ngClass]="{'disabled': disabled, 
                  'w-edit-calendar-no-icon' : !showIcon,
                  'ng-invalid ng-dirty': isNgModelInvalid()
      }" 
      [(ngModel)]="ngModelValue" 
      placeholder="{{placeholder}}"
      appendTo="body" 
      [disabled]="disabled"
      [showIcon]="showIcon"
      [icon]="timeOnly ? 'pi pi-clock' : 'pi pi-calendar'"  
      [showTime]="showTime" 
      [timeOnly]="timeOnly" 
      [showSeconds]="showSeconds" 
      [showIcon]="showIcon" 
      [minDate]="minDate"
      [maxDate]="maxDate" 
      [firstDayOfWeek]="firstDayOfWeek"
      [required]="required" 
      [dataType]="dataType" 
      [view]="viewType" 
      [dateFormat]="dateFormat" 
      [readonlyInput]="readonlyInput" 
      (ngModelChange)="onDateChanged()"
      (blur)="onDateBlur()"
      [keepInvalid]="keepInvalid"
    />
  </div>
}