<div class="{{field.className}}"
     id="data-time-widget" [class.adf-invalid]="!field.isValid">
    <mat-form-field class="adf-date-time-widget">
        <label class="adf-label" [attr.for]="field.id">{{field.name}} ({{field.dateDisplayFormat}})<span *ngIf="isRequired()">*</span></label>
        <input matInput
               [matDatetimepicker]="datetimePicker"
               [id]="field.id"
               [(ngModel)]="displayDate"
               [required]="isRequired()"
               [disabled]="field.readOnly"
               [min]="minDate"
               [max]="maxDate"
               (focusout)="onDateChanged($event.srcElement.value)"
               (dateChange)="onDateChanged($event)"
               placeholder="{{field.placeholder}}">
        <mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly"></mat-datetimepicker-toggle>
    </mat-form-field>
    <error-widget [error]="field.validationSummary"></error-widget>
    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
    <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"></mat-datetimepicker>
</div>
