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

<span #dropDown="appDropDown" [appConnectedPositions]="connectedPositions"
      [appDisabled]="appDisabled"
      [appDropDown]="calendarRef"
      class="container">

  <input
    #inputElement
    (blur)="onInputBlur(inputElement)"
    (input)="onInputChange(inputElement.value)"
    (keydown)="onKeyDown($event)"
    (mousedown)="onMouseDown(inputElement)"
    [class.calendar-control-input-opened-bottom]="dropDown.position?.panelClass === 'bottom'"
    [class.calendar-control-input-opened-top]="dropDown.position?.panelClass === 'top'"
    [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">

  <mat-icon (mousedown)="$event.preventDefault(); inputElement.focus(); toggle();"
            [class.calendar-icon-open]="dropDown?.isOpen"
            class="calendar-icon">
    today
  </mat-icon>

</span>

<ng-template #calendarRef>
  <p-calendar #calendar
              (keydown)="onKeyDown($event, true)"
              (ngModelChange)="onCalendarChange($event);"
              (onMonthChange)="dropDown.updatePosition()"
              (focusout)="inputElement.focus();"
              [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>