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 [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.hasError('required') && !hasParseError(from)">
            {{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
        </mat-error>
        <mat-error *ngIf="from.hasError('matDatepickerMax')">
            {{ 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE' | translate }}
        </mat-error>
        <mat-error *ngIf="hasParseError(from)">
            {{ 'SEARCH.FILTER.VALIDATION.INVALID-DATE' | translate: { requiredFormat: datePickerDateFormat } }}
        </mat-error>
    </mat-form-field>

    <mat-form-field>
        <input matInput [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.hasError('required') && !hasParseError(to)">
                {{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
        </mat-error>
        <mat-error *ngIf="to.hasError('matDatepickerMin')">
                {{ 'SEARCH.FILTER.VALIDATION.NO-DAYS' | translate }}
        </mat-error>
        <mat-error *ngIf="to.hasError('matDatepickerMax')">
            {{ 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE' | translate }}
        </mat-error>
        <mat-error *ngIf="hasParseError(to)">
            {{ 'SEARCH.FILTER.VALIDATION.INVALID-DATE' | 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>