<div class="mdl-grid mdl-grid__date-widget {{field.className}}" *ngIf="field?.isVisible" id="data-widget">
    <div class="mdl-cell mdl-cell--11-col">
        <div class="mdl-textfield mdl-js-textfield date-widget"
             [class.date-widget__invalid]="!field.isValid">
            <label [attr.for]="field.id">{{field.name}} ({{field.dateDisplayFormat}})</label>
            <input class="mdl-textfield__input mdl-date__input"
                   type="text"
                   [attr.id]="field.id"
                   [attr.required]="isRequired()"
                   [value]="field.value"
                   [(ngModel)]="field.value"
                   (ngModelChange)="onDateChanged()"
                   (onOk)="onDateSelected()"
                   [disabled]="field.readOnly"
                   placeholder="{{field.placeholder}}">
            <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
        <button
            class="mdl-button mdl-js-button mdl-button--icon"
            (click)="datePicker.toggle()">
            <i class="material-icons">date_range</i>
        </button>
    </div>
</div>

