date-picker.component.html

<div [ngClass]="{'dp-open': areCalendarsShown}">
  <div class="dp-input-container"
       [hidden]="componentConfig.hideInputContainer"
       [attr.data-hidden]="componentConfig.hideInputContainer">
    <input type="text"
           class="dp-picker-input"
           [placeholder]="placeholder"
           [ngModel]="inputElementValue | pNumber"
           (ngModelChange)="onViewDateChange($event)"
           (focus)="inputFocused()"
           [readonly]="componentConfig.disableKeypress"
           [disabled]="disabled"/>
  </div>
  <div #container>
    <div class="dp-popup {{theme}}"
         [ngSwitch]="mode"
         [hidden]="!_areCalendarsShown"
         [attr.data-hidden]="!_areCalendarsShown">
      <dp-day-calendar #dayCalendar
                       *ngSwitchCase="'day'"
                       [config]="dayCalendarConfig"
                       [ngModel]="_selected"
                       [displayDate]="displayDate"
                       (onSelect)="dateSelected($event, 'day')"
                       [theme]="theme">
      </dp-day-calendar>

      <dp-month-calendar #monthCalendar
                         *ngSwitchCase="'month'"
                         [config]="dayCalendarConfig"
                         [ngModel]="_selected"
                         [displayDate]="displayDate"
                         (onSelect)="dateSelected($event, 'month')"
                         [theme]="theme">
      </dp-month-calendar>

      <dp-time-select #timeSelect
                      *ngSwitchCase="'time'"
                      [config]="timeSelectConfig"
                      [ngModel]="_selected && _selected[0]"
                      (onChange)="dateSelected($event, 'second', true)"
                      [theme]="theme">
      </dp-time-select>

      <dp-day-time-calendar #daytimeCalendar
                            *ngSwitchCase="'daytime'"
                            [config]="dayTimeCalendarConfig"
                            [displayDate]="displayDate"
                            [ngModel]="_selected && _selected[0]"
                            (onChange)="dateSelected($event, 'second', true)"
                            [theme]="theme">
      </dp-day-time-calendar>
    </div>
  </div>
</div>