From bf58d5d0b3ee2fd824b5d5616292618e8b713e23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 26 Jun 2026 12:26:09 +0200
Subject: [PATCH] feat(ui): render date inputs in the user's date-format
 preference

Swap the medication scheduling, inventory, illness, vorsorge, lab-OCR
and profile-birthdate date inputs from the native field to the
DateField primitive, which paints the chosen DMY/MDY/YMD/AUTO order
over an ISO yyyy-MM-dd value. The committed value contract, min/max
bounds and aria wiring are unchanged.
---
 src/components/illness/log-day-sheet.tsx      |  8 ++++----
 src/components/illness/new-episode-sheet.tsx  |  6 +++---
 src/components/labs/ocr-row-editor.tsx        |  8 +++-----
 .../vorsorge-section.tsx                      |  8 ++++----
 .../medications/scheduling/cadence-picker.tsx |  7 +++----
 .../scheduling/course-window-row.tsx          | 19 +++++++++----------
 .../sections/inventory-section.tsx            |  7 +++----
 .../settings/account-section/index.tsx        |  6 +++---
 8 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/components/illness/log-day-sheet.tsx b/src/components/illness/log-day-sheet.tsx
index 19319ee94..1f6a740e8 100644
--- a/src/components/illness/log-day-sheet.tsx
+++ b/src/components/illness/log-day-sheet.tsx
@@ -19,6 +19,7 @@ import { Activity, CalendarDays, NotebookPen, Thermometer } from "lucide-react";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
 import { SheetSection, SheetSectionCount } from "@/components/ui/sheet-section";
 import { Button } from "@/components/ui/button";
+import { DateField } from "@/components/ui/date-field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -266,14 +267,13 @@ export function LogDaySheet({
             <Label htmlFor="illness-log-date" className="sr-only">
               {t("illness.sheet.day")}
             </Label>
-            <Input
+            <DateField
               id="illness-log-date"
-              type="date"
               value={selectedDate}
               min={onsetDate}
               max={date}
-              onChange={(e) => {
-                if (e.target.value) setSelectedDate(e.target.value);
+              onChange={(value) => {
+                if (value) setSelectedDate(value);
               }}
               className="max-w-44"
             />
diff --git a/src/components/illness/new-episode-sheet.tsx b/src/components/illness/new-episode-sheet.tsx
index a93d61480..0334548b3 100644
--- a/src/components/illness/new-episode-sheet.tsx
+++ b/src/components/illness/new-episode-sheet.tsx
@@ -10,6 +10,7 @@ import { useState } from "react";
 
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
 import { Button } from "@/components/ui/button";
+import { DateField } from "@/components/ui/date-field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -230,12 +231,11 @@ export function NewEpisodeSheet({
 
         <div className="space-y-1.5">
           <Label htmlFor="illness-onset">{t("illness.new.onset")}</Label>
-          <Input
+          <DateField
             id="illness-onset"
-            type="date"
             value={onset}
             max={today}
-            onChange={(e) => setOnset(e.target.value)}
+            onChange={setOnset}
             className="max-w-44"
           />
         </div>
diff --git a/src/components/labs/ocr-row-editor.tsx b/src/components/labs/ocr-row-editor.tsx
index 640ff96bf..f3838308d 100644
--- a/src/components/labs/ocr-row-editor.tsx
+++ b/src/components/labs/ocr-row-editor.tsx
@@ -25,6 +25,7 @@ import {
 
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
+import { DateField } from "@/components/ui/date-field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useTranslations } from "@/lib/i18n/context";
@@ -178,13 +179,10 @@ export function OcrRowEditor({
           <Label htmlFor={`${fieldId}-date`} className="text-xs">
             {t("labs.ocr.dateLabel")}
           </Label>
-          <Input
+          <DateField
             id={`${fieldId}-date`}
-            type="date"
             value={row.takenAt ?? ""}
-            onChange={(e) =>
-              onChange({ ...row, takenAt: e.target.value || null })
-            }
+            onChange={(value) => onChange({ ...row, takenAt: value || null })}
           />
         </div>
       </div>
diff --git a/src/components/measurement-reminders/vorsorge-section.tsx b/src/components/measurement-reminders/vorsorge-section.tsx
index b1a68df33..280702666 100644
--- a/src/components/measurement-reminders/vorsorge-section.tsx
+++ b/src/components/measurement-reminders/vorsorge-section.tsx
@@ -64,6 +64,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { DateField } from "@/components/ui/date-field";
 import { EmptyState } from "@/components/ui/empty-state";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -598,12 +599,11 @@ export function VorsorgeSection({
             <Label htmlFor="vorsorge-anchor">
               {t("measurementReminders.form.firstDue")}
             </Label>
-            <Input
+            <DateField
               id="vorsorge-anchor"
-              type="date"
               value={form.anchorDate}
-              onChange={(e) =>
-                setForm((f) => ({ ...f, anchorDate: e.target.value }))
+              onChange={(value) =>
+                setForm((f) => ({ ...f, anchorDate: value }))
               }
             />
           </div>
diff --git a/src/components/medications/scheduling/cadence-picker.tsx b/src/components/medications/scheduling/cadence-picker.tsx
index aac443d72..4a4271e0b 100644
--- a/src/components/medications/scheduling/cadence-picker.tsx
+++ b/src/components/medications/scheduling/cadence-picker.tsx
@@ -49,6 +49,7 @@
 
 import { useCallback, useId, useMemo } from "react";
 
+import { DateField } from "@/components/ui/date-field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useTranslations } from "@/lib/i18n/context";
@@ -602,13 +603,11 @@ function YearlyDate({
       <Label htmlFor={id} className="text-sm">
         {t(`${i18nPrefix}.yearly.date.label`)}
       </Label>
-      <Input
+      <DateField
         id={id}
-        type="date"
         value={value}
         disabled={disabled}
-        onChange={(e) => onChange(e.target.value)}
-        className="h-11"
+        onChange={onChange}
         data-slot="cadence-yearly-date"
       />
     </div>
diff --git a/src/components/medications/scheduling/course-window-row.tsx b/src/components/medications/scheduling/course-window-row.tsx
index aaad105bd..4ec9f91c1 100644
--- a/src/components/medications/scheduling/course-window-row.tsx
+++ b/src/components/medications/scheduling/course-window-row.tsx
@@ -25,7 +25,7 @@
 
 import { useCallback, useId, useMemo } from "react";
 
-import { Input } from "@/components/ui/input";
+import { DateField } from "@/components/ui/date-field";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { useTranslations } from "@/lib/i18n/context";
@@ -135,15 +135,15 @@ export function CourseWindowRow({
           <Label htmlFor={startId} className="text-sm">
             {t(`${i18nPrefix}.startsOn.label`)}
           </Label>
-          <Input
+          <DateField
             id={startId}
-            type="date"
             value={startsIso}
             disabled={disabled}
-            onChange={(e) => onStartsChange(e.target.value)}
-            className="h-11 w-full"
+            onChange={onStartsChange}
+            className="w-full"
             aria-label={t(`${i18nPrefix}.startsOn.label`)}
             data-slot="course-window-starts"
+            data-testid="course-window-starts-field"
           />
         </div>
 
@@ -152,17 +152,16 @@ export function CourseWindowRow({
           <Label htmlFor={endId} className="text-sm">
             {t(`${i18nPrefix}.endsOn.label`)}
           </Label>
-          <Input
+          <DateField
             id={endId}
-            type="date"
             value={endsIso}
             disabled={disabled || noEndDate || lockEndsToStart}
-            readOnly={lockEndsToStart}
-            onChange={(e) => onEndsChange(e.target.value)}
-            className="h-11 w-full"
+            onChange={onEndsChange}
+            className="w-full"
             aria-label={t(`${i18nPrefix}.endsOn.label`)}
             aria-invalid={!valid || undefined}
             data-slot="course-window-ends"
+            data-testid="course-window-ends-field"
           />
           {lockEndsToStart && (
             <p
diff --git a/src/components/medications/sections/inventory-section.tsx b/src/components/medications/sections/inventory-section.tsx
index 5b959a88c..1f2d664ae 100644
--- a/src/components/medications/sections/inventory-section.tsx
+++ b/src/components/medications/sections/inventory-section.tsx
@@ -56,6 +56,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DateField } from "@/components/ui/date-field";
 import { EmptyState } from "@/components/ui/empty-state";
 import { Input } from "@/components/ui/input";
 import {
@@ -649,12 +650,10 @@ export function AddInventoryDialog({
             >
               {t("medications.detail.bestand.addExpiryLabel")}
             </label>
-            <Input
+            <DateField
               id="inventory-add-expiry"
-              type="date"
-              autoComplete="off"
               value={expiry}
-              onChange={(e) => setExpiry(e.target.value)}
+              onChange={setExpiry}
             />
           </div>
           <DialogFooter>
diff --git a/src/components/settings/account-section/index.tsx b/src/components/settings/account-section/index.tsx
index 57c68ce83..4fc5df757 100644
--- a/src/components/settings/account-section/index.tsx
+++ b/src/components/settings/account-section/index.tsx
@@ -13,7 +13,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { DateInput } from "@/components/ui/date-input";
+import { DateField } from "@/components/ui/date-field";
 import { Label } from "@/components/ui/label";
 import { NativeSelect } from "@/components/ui/native-select";
 import { PasswordInput } from "@/components/ui/password-input";
@@ -373,10 +373,10 @@ export function AccountSection() {
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="dob">{t("settings.dateOfBirth")}</Label>
-              <DateInput
+              <DateField
                 id="dob"
                 value={dateOfBirth}
-                onChange={(e) => setDateOfBirth(e.target.value)}
+                onChange={setDateOfBirth}
                 max={new Date().toISOString().slice(0, 10)}
               />
               <p className="text-muted-foreground text-xs">