55 lines
2.5 KiB
HTML

<label for="adf-dateRange" >{{field.nameKey | translate}}</label><br>
<div id="adf-dateRange" [formGroup]="dateRange">
<small *ngIf="isStartDateGreaterThanEndDate()" class="adf-date-range-analytics-text-danger">
{{'DATE-WIDGET.MESSAGES.START-LESS-THAN-END-DATE' | translate}}
</small>
<small *ngIf="isStartDateEmpty()" class="adf-date-range-analytics-text-danger">
{{'DATE-WIDGET.MESSAGES.START-DATE-REQUIRED' | translate}}
</small>
<mat-grid-list cols="2" rowHeight="80px">
<mat-grid-tile>
<mat-form-field>
<input
matInput
[min]="minDate"
[max]="maxDate"
formControlName="startDate"
[matDatepicker]="startDate"
[value]="startDatePicker"
(keydown)="true"
(dateChange)="onGroupValueChanged()"
placeholder="{{'DATE-WIDGET.START-DATE' | translate}}"
id="startDate_id"
required>
<mat-datepicker-toggle matSuffix [for]="startDate" ></mat-datepicker-toggle>
</mat-form-field>
<mat-datepicker
#startDate
[touchUi]="true">
</mat-datepicker>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field>
<input
matInput
[min]="minDate"
[max]="maxDate"
formControlName="endDate"
[matDatepicker]="endDate"
[value]="endDatePicker"
(keydown)="true"
(dateChange)="onGroupValueChanged()"
placeholder="{{'DATE-WIDGET.END-DATE' | translate}}"
id="endDate_id"
required>
<mat-datepicker-toggle matSuffix [for]="endDate" ></mat-datepicker-toggle>
</mat-form-field>
<mat-datepicker
#endDate
[touchUi]="true">
</mat-datepicker>
</mat-grid-tile>
</mat-grid-list>
</div>