alfresco-ng2-components/lib/content-services/search/components/search-date-range/search-date-range.component.html

<form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
    <mat-form-field>
        <input matInput
                (input)="forcePlaceholder($event)"
                [formControl]="from"
                [errorStateMatcher]="matcher"
                placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}"
                [matDatepicker]="fromDatepicker"
                [max]="maxDate"
                (focusout)="onChangedHandler($event, from)">
        <mat-datepicker-toggle matSuffix [for]="fromDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #fromDatepicker></mat-datepicker>
        <mat-error *ngIf="from.invalid">
            {{ getFromValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
        </mat-error>
    </mat-form-field>

    <mat-form-field>
        <input matInput
                (input)="forcePlaceholder($event)"
                [formControl]="to"
                [errorStateMatcher]="matcher"
                placeholder="{{ 'SEARCH.FILTER.RANGE.TO-DATE' | translate }}"
                [matDatepicker]="toDatepicker"
                [min]="from.value"
                [max]="maxDate"
                (focusout)="onChangedHandler($event, to)">
        <mat-datepicker-toggle matSuffix [for]="toDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #toDatepicker></mat-datepicker>
        <mat-error *ngIf="to.invalid">
            {{ getToValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
        </mat-error>
    </mat-form-field>

    <div class="facet-buttons facet-buttons--topSpace">
        <button mat-button color="primary" type="button" (click)="reset()">
            {{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
        </button>
        <button mat-button color="primary" type="submit" [disabled]="!form.valid">
            {{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
        </button>
    </div>
</form>