feat(ui): use Material datepickers for planning horizon

src/app/app-settings.spec.ts

@@ -352,9 +352,9 @@ describe('Application Settings', () => {
 		);
 		const start = period.querySelector<HTMLInputElement>('input[name="planningStart"]')!;
 		const last = period.querySelector<HTMLInputElement>('input[name="lastPlanningDate"]')!;
-		start.value = '2024-02-29';
+		start.value = '29/02/2024';
 		start.dispatchEvent(new Event('input'));
-		last.value = '2024-03-08';
+		last.value = '08/03/2024';
 		last.dispatchEvent(new Event('input'));
 		await fixture.whenStable();
 		expect(calculate).toHaveBeenCalledOnce();
@@ -379,10 +379,10 @@ describe('Application Settings', () => {
 
 		await revisitApp(true);
 		expect(fixture.nativeElement.querySelector('input[name="planningStart"]').value).toBe(
-			'2024-02-29',
+			'29/02/2024',
 		);
 		expect(fixture.nativeElement.querySelector('input[name="lastPlanningDate"]').value).toBe(
-			'2024-03-08',
+			'08/03/2024',
 		);
 	});