/
date-value-handler.component.html
34 lines (29 loc) · 1.47 KB
/
date-value-handler.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div [formGroup]="form">
<div class="date-form-grid">
<div class="date-form-field">
<app-date-picker class="start-date" [formControlName]="'startDate'"></app-date-picker>
</div>
<button mat-button class="toggle-period-control" [disabled]="!startDate.value"
[matTooltip]="(isPeriodControl.value ? 'Delete end date' : 'Add end date')" matTooltipPosition="above"
(click)="togglePeriodControl($event)">
<mat-icon *ngIf="!isPeriodControl.value">keyboard_tab</mat-icon>
<mat-icon *ngIf="isPeriodControl.value">remove</mat-icon>
</button>
<div *ngIf="isPeriodControl.value && startDate.value" class="date-form-field">
<app-date-picker class="end-date" [formControlName]="'endDate'" [disableCalendarSelector]="true"
[calendar]="startDate.value.calendar">
</app-date-picker>
</div>
</div>
<div class="date-form-error">
<mat-error *ngIf="startDate.hasError('required')">
<span class="custom-error-message">One date is <strong>required</strong></span>
</mat-error>
<mat-error *ngIf="endDate.hasError('required')">
<span class="custom-error-message">End date is <strong>required</strong></span>
</mat-error>
<mat-error *ngIf="startDate.hasError('periodStartEnd')">
<span class="custom-error-message">End date must be after start date.</span>
</mat-error>
</div>
</div>