<div class="HRD_datetimepicker" [formGroup]="parentFormGroup">
  <label #placeholderLabel *ngIf="(hasFocus||!!date) && !! placeholder"
    [class]="'dx-datebox-label hs_label '+(!isNotEmpty ? 'hs_label_invalid': (hasFocus?'hs_label_focused':''))">
    <span>{{placeholder}}</span>
  </label>
  <dx-date-box
    #dtbox
    id="dtbox"
    stylingMode="underlined"
    labelMode="hidden"
    [class]="'dxDateBox ' +(isValid ? '': 'hs_label_invalid')"
    [placeholder]="!hasFocus&&!date?placeholder:''"
    [validationMessageMode]="isValidDate() ? 'auto': 'always'"
    dateOutOfRangeMessage="{{dateOutOfRangeMessage | translate}}"
    [showDropDownButton]="true"
    [useMaskBehavior]="true"
    [showClearButton]="false"
    [displayFormat]="pickerDisplayFormat"
    [type]="getDisplayFormat"
    [min]="minDate"
    [max]="maxDate"
    [calendarOptions]="calendarOptions"
    [required]="required"
    [interval]="stepMinute"
    [formControlName]="formControlName"
    [name]="name"
    [isValid]="isValid"
    (onValueChanged)="inputChanged($event)"
    (change)="change($event)"
    [valueChangeEvent]="'keyup'"
    (onFocusIn)="hasFocus=true"
    (onFocusOut)="hasFocus=false"
    (onClosed)="dtbox.isValid = isValid"
    (onKeyDown)="doKeyDown($event, dtbox.opened)">
    <div *dxTemplate="let data of 'dropDownButton'">
      <i class="dx-icon dx-icon-event"></i>
    </div>
    <dx-validator>
      <!-- <dxi-validation-rule *ngIf="required && !isNotEmpty" type="required" message="Bitte ein Datum/Uhrzeit angeben"></dxi-validation-rule> -->
      <dxi-validation-rule *ngIf=customNotValid() type="custom" [message]=customValidationMessage [validationCallback]="customNotValid"></dxi-validation-rule>
    </dx-validator>

    <dxi-button name="dropDown"></dxi-button>
    <dxi-button name="nextDate" location="after" [options]="btnClear"></dxi-button>
  </dx-date-box>
</div>
