<label>{{field.nameKey | translate}}</label><br>
<div [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>
