feat(ui): use Material datepickers for planning horizon

src/app/components/user-input/user-input.html

@@ -14,41 +14,45 @@
 			<mat-label>{{ tr().settings.planningStart }}</mat-label>
 			<input
 				matInput
-				type="date"
+				[matDatepicker]="planningStartPicker"
 				name="planningStart"
 				required
-				#planningStart
-				[value]="calendarSettings.planningDates().start"
+				[ngModel]="planningDates().start"
+				(ngModelChange)="setPlanningDate('start', $event)"
 				[attr.aria-invalid]="!!calendarSettings.planningHorizonError()"
 				[attr.aria-describedby]="
 					calendarSettings.planningHorizonError()
 						? 'planning-dates-help planning-dates-error'
 						: 'planning-dates-help'
 				"
-				(input)="
-					calendarSettings.setPlanningDates(planningStart.value, lastPlanningDate.value)
-				"
 			/>
+			<mat-datepicker-toggle
+				matIconSuffix
+				[for]="planningStartPicker"
+			></mat-datepicker-toggle>
+			<mat-datepicker #planningStartPicker></mat-datepicker>
 		</mat-form-field>
 		<mat-form-field appearance="outline">
 			<mat-label>{{ tr().settings.lastPlanningDate }}</mat-label>
 			<input
 				matInput
-				type="date"
+				[matDatepicker]="lastPlanningDatePicker"
 				name="lastPlanningDate"
 				required
-				#lastPlanningDate
-				[value]="calendarSettings.planningDates().lastPlanningDate"
+				[ngModel]="planningDates().lastPlanningDate"
+				(ngModelChange)="setPlanningDate('lastPlanningDate', $event)"
 				[attr.aria-invalid]="!!calendarSettings.planningHorizonError()"
 				[attr.aria-describedby]="
 					calendarSettings.planningHorizonError()
 						? 'planning-dates-help planning-dates-error'
 						: 'planning-dates-help'
 				"
-				(input)="
-					calendarSettings.setPlanningDates(planningStart.value, lastPlanningDate.value)
-				"
 			/>
+			<mat-datepicker-toggle
+				matIconSuffix
+				[for]="lastPlanningDatePicker"
+			></mat-datepicker-toggle>
+			<mat-datepicker #lastPlanningDatePicker></mat-datepicker>
 		</mat-form-field>
 		@if (calendarSettings.planningHorizonError(); as error) {
 			<p id="planning-dates-error" class="validation-error" role="alert">