2019-03-25 18:00:38 +00:00

46 lines
2.3 KiB
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)"
data-automation-id="date-range-from-input">
<mat-datepicker-toggle matSuffix [for]="fromDatepicker" data-automation-id="date-range-from-date-toggle"></mat-datepicker-toggle>
<mat-datepicker #fromDatepicker></mat-datepicker>
<mat-error *ngIf="from.invalid" data-automation-id="date-range-from-error">
{{ 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)"
data-automation-id="date-range-to-input">
<mat-datepicker-toggle matSuffix [for]="toDatepicker" data-automation-id="date-range-to-date-toggle"></mat-datepicker-toggle>
<mat-datepicker #toDatepicker></mat-datepicker>
<mat-error *ngIf="to.invalid" data-automation-id="date-range-to-error">
{{ getToValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
</mat-error>
</mat-form-field>
<div class="adf-facet-buttons adf-facet-buttons--topSpace">
<button mat-button color="primary" type="button" (click)="reset()" data-automation-id="date-range-clear-btn">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
</button>
<button mat-button color="primary" type="submit" [disabled]="!form.valid" data-automation-id="date-range-apply-btn">
{{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
</button>
</div>
</form>