src/app/shared/date-control/component/date-control.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<input #dropDown="appDropDown"
       #inputElement
       (blur)="onInputBlur(inputElement)"
       (click)="dropDown.open()"
       (focusin)="onFocusIn($event)"
       (input)="onInputChange(inputElement.value)"
       (keydown)="onKeyDown($event)"
       [appConnectedPositions]="connectedPositions"
       [appDisabled]="appDisabled"
       [appDropDown]="calendarRef"
       [class.calendar-control-input-opened]="dropDown.isOpen"
       [class.openk-danger]="appDanger"
       [class.openk-focus]="dropDown.isOpen"
       [class.openk-info]="appInfo"
       [class.openk-success]="appSuccess"
       [class.openk-warning]="appWarning"
       [disabled]="appDisabled"
       [id]="appId"
       [ngModel]="(displayedValue | appMomentPipe : appInternalFormat).format(appDisplayFormat)"
       autocomplete="off"
       class="openk-input calendar-control-input"
       name="dueDate"
       required
       type="text">

<ng-template #calendarRef>
  <p-calendar #calendar
              (dblclick)="dropDown.close()"
              (keydown)="onKeyDown($event, true)"
              (ngModelChange)="onCalendarChange($event);"
              (onMonthChange)="dropDown.updatePosition()"
              [disabled]="appDisabled"
              [inline]="true"
              [ngModel]="value"
              class="openk-datepicker">

    <ng-template let-date pTemplate="date">
      <span [class.calendar-control-day-selected]="calendar.isSelected(date)"
            [class.calendar-control-day-today]="date?.today"
            class="calendar-control-day">
        {{date.day}}
      </span>
    </ng-template>

    <ng-template let-date pTemplate="disabledDate">
      <span [class.calendar-control-day-selected]="calendar.isSelected(date)"
            [class.calendar-control-day-today]="date?.today"
            class="calendar-control-day calendar-control-day-disabled">
        {{date.day}}
      </span>
    </ng-template>

  </p-calendar>
</ng-template>