From ff6e18473aa76301eb5cda51bda4de805f1263a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 10 May 2026 13:36:23 +0200
Subject: [PATCH] fix(forms): hint browser locale on date and datetime inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Native `<input type="date">` and `<input type="datetime-local">`
were rendering `mm/dd/yyyy` even when the German locale was
active, because Chromium picks the input's locale from the
nearest `lang` attribute on the element rather than from
`<html lang>`. Pass `lang={locale}` on every date/datetime input
in the app — onboarding DOB, account DOB, export filters,
doctor-report range, measurement / medication / mood timestamp
fields — so DE users now see `TT.MM.JJJJ`. Display formatting
already routed through `useFormatters()`; this closes the form
half of the same gap.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/onboarding/page.tsx                           | 1 +
 src/components/doctor-report/doctor-report-dialog.tsx | 4 +++-
 src/components/measurements/measurement-form.tsx      | 3 ++-
 src/components/measurements/measurement-list.tsx      | 3 ++-
 src/components/medications/intake-history-list.tsx    | 6 +++++-
 src/components/mood/mood-form.tsx                     | 3 ++-
 src/components/mood/mood-list.tsx                     | 3 ++-
 src/components/settings/account-section.tsx           | 1 +
 src/components/settings/export-section.tsx            | 4 +++-
 9 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx
index 266df7455..6fad41252 100644
--- a/src/app/onboarding/page.tsx
+++ b/src/app/onboarding/page.tsx
@@ -304,6 +304,7 @@ export default function OnboardingPage() {
             <Input
               id="ob-dob"
               type="date"
+              lang={locale}
               value={dateOfBirth}
               onChange={(e) => setDateOfBirth(e.target.value)}
               max={new Date().toISOString().slice(0, 10)}
diff --git a/src/components/doctor-report/doctor-report-dialog.tsx b/src/components/doctor-report/doctor-report-dialog.tsx
index acdbe654f..91035c7d8 100644
--- a/src/components/doctor-report/doctor-report-dialog.tsx
+++ b/src/components/doctor-report/doctor-report-dialog.tsx
@@ -80,7 +80,7 @@ export function DoctorReportDialog({
   defaultPracticeName,
   onSubmit,
 }: DoctorReportDialogProps) {
-  const { t } = useTranslations();
+  const { t, locale } = useTranslations();
   const [startDate, setStartDate] = useState<string>(defaultStartIso);
   const [endDate, setEndDate] = useState<string>(todayIso);
   const [practiceName, setPracticeName] = useState<string>("");
@@ -194,6 +194,7 @@ export function DoctorReportDialog({
               <Input
                 id="dr-start"
                 type="date"
+                lang={locale}
                 value={startDate}
                 max={endDate || todayIso()}
                 onChange={(e) => {
@@ -210,6 +211,7 @@ export function DoctorReportDialog({
               <Input
                 id="dr-end"
                 type="date"
+                lang={locale}
                 value={endDate}
                 min={startDate}
                 max={todayIso()}
diff --git a/src/components/measurements/measurement-form.tsx b/src/components/measurements/measurement-form.tsx
index 4ca3381d5..2eabaf6e0 100644
--- a/src/components/measurements/measurement-form.tsx
+++ b/src/components/measurements/measurement-form.tsx
@@ -117,7 +117,7 @@ export function MeasurementForm({
   onCancel,
   defaultType,
 }: MeasurementFormProps) {
-  const { t } = useTranslations();
+  const { t, locale } = useTranslations();
   const queryClient = useQueryClient();
 
   // Normalize legacy BP types to combined mode
@@ -361,6 +361,7 @@ export function MeasurementForm({
         <Input
           id="measuredAt"
           type="datetime-local"
+          lang={locale}
           value={measuredAt}
           onChange={(e) => setMeasuredAt(e.target.value)}
           required
diff --git a/src/components/measurements/measurement-list.tsx b/src/components/measurements/measurement-list.tsx
index db494cd92..24ba4ca78 100644
--- a/src/components/measurements/measurement-list.tsx
+++ b/src/components/measurements/measurement-list.tsx
@@ -105,7 +105,7 @@ function toDateTimeLocalValue(isoString: string): string {
 }
 
 export function MeasurementList({ onEdit, onAddFirst }: MeasurementListProps) {
-  const { t } = useTranslations();
+  const { t, locale } = useTranslations();
   const fmt = useFormatters();
   const { isAuthenticated } = useAuth();
   const queryClient = useQueryClient();
@@ -562,6 +562,7 @@ export function MeasurementList({ onEdit, onAddFirst }: MeasurementListProps) {
                 <Input
                   id="edit-measuredAt"
                   type="datetime-local"
+                  lang={locale}
                   value={editMeasuredAt}
                   onChange={(e) => setEditMeasuredAt(e.target.value)}
                   required
diff --git a/src/components/medications/intake-history-list.tsx b/src/components/medications/intake-history-list.tsx
index 3ad8a950a..e6b7b0af1 100644
--- a/src/components/medications/intake-history-list.tsx
+++ b/src/components/medications/intake-history-list.tsx
@@ -95,7 +95,7 @@ export function IntakeHistoryList({
 }: IntakeHistoryListProps) {
   const { isAuthenticated } = useAuth();
   const queryClient = useQueryClient();
-  const { t } = useTranslations();
+  const { t, locale } = useTranslations();
 
   const sourceLabels: Record<string, string> = {
     WEB: t("medications.sourceWeb"),
@@ -545,6 +545,7 @@ export function IntakeHistoryList({
                 <Input
                   id="edit-scheduledFor"
                   type="datetime-local"
+                  lang={locale}
                   value={editScheduledFor}
                   onChange={(e) => setEditScheduledFor(e.target.value)}
                   required
@@ -558,6 +559,7 @@ export function IntakeHistoryList({
                 <Input
                   id="edit-takenAt"
                   type="datetime-local"
+                  lang={locale}
                   value={editTakenAt}
                   onChange={(e) => setEditTakenAt(e.target.value)}
                   disabled={editSkipped}
@@ -689,6 +691,7 @@ export function IntakeHistoryList({
               <Input
                 id="create-scheduledFor"
                 type="datetime-local"
+                lang={locale}
                 value={createScheduledFor}
                 onChange={(e) => setCreateScheduledFor(e.target.value)}
                 required
@@ -702,6 +705,7 @@ export function IntakeHistoryList({
               <Input
                 id="create-takenAt"
                 type="datetime-local"
+                lang={locale}
                 value={createTakenAt}
                 onChange={(e) => setCreateTakenAt(e.target.value)}
                 disabled={createSkipped}
diff --git a/src/components/mood/mood-form.tsx b/src/components/mood/mood-form.tsx
index eb39bfcdb..50a19128f 100644
--- a/src/components/mood/mood-form.tsx
+++ b/src/components/mood/mood-form.tsx
@@ -37,7 +37,7 @@ function getDefaultMoodLoggedAtValue() {
 }
 
 export function MoodForm({ onSuccess, onCancel }: MoodFormProps) {
-  const { t } = useTranslations();
+  const { t, locale } = useTranslations();
   const queryClient = useQueryClient();
 
   const [mood, setMood] = useState("");
@@ -135,6 +135,7 @@ export function MoodForm({ onSuccess, onCancel }: MoodFormProps) {
         <Input
           id="mood-logged-at"
           type="datetime-local"
+          lang={locale}
           value={moodLoggedAt}
           onChange={(e) => setMoodLoggedAt(e.target.value)}
           required
diff --git a/src/components/mood/mood-list.tsx b/src/components/mood/mood-list.tsx
index ced9dbde7..8540f8d43 100644
--- a/src/components/mood/mood-list.tsx
+++ b/src/components/mood/mood-list.tsx
@@ -117,7 +117,7 @@ interface MoodListProps {
 }
 
 export function MoodList({ onAddFirst }: MoodListProps = {}) {
-  const { t } = useTranslations();
+  const { t, locale } = useTranslations();
   const fmt = useFormatters();
   const { isAuthenticated } = useAuth();
   const queryClient = useQueryClient();
@@ -572,6 +572,7 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
                 <Input
                   id="edit-mood-logged-at"
                   type="datetime-local"
+                  lang={locale}
                   value={editMoodLoggedAt}
                   onChange={(e) => setEditMoodLoggedAt(e.target.value)}
                   required
diff --git a/src/components/settings/account-section.tsx b/src/components/settings/account-section.tsx
index fb7930785..9d0d91d2a 100644
--- a/src/components/settings/account-section.tsx
+++ b/src/components/settings/account-section.tsx
@@ -386,6 +386,7 @@ export function AccountSection() {
               <Input
                 id="dob"
                 type="date"
+                lang={locale}
                 value={dateOfBirth}
                 onChange={(e) => setDateOfBirth(e.target.value)}
                 max={new Date().toISOString().slice(0, 10)}
diff --git a/src/components/settings/export-section.tsx b/src/components/settings/export-section.tsx
index d619f5995..d407229f9 100644
--- a/src/components/settings/export-section.tsx
+++ b/src/components/settings/export-section.tsx
@@ -253,7 +253,7 @@ function DateRangeFields({
   setUntil,
   idPrefix,
 }: DateRangeFieldsProps) {
-  const { t } = useTranslations();
+  const { t, locale } = useTranslations();
   return (
     <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
       <div className="space-y-1.5">
@@ -263,6 +263,7 @@ function DateRangeFields({
         <Input
           id={`${idPrefix}-since`}
           type="date"
+          lang={locale}
           value={since}
           onChange={(e) => setSince(e.target.value)}
           max={until || undefined}
@@ -275,6 +276,7 @@ function DateRangeFields({
         <Input
           id={`${idPrefix}-until`}
           type="date"
+          lang={locale}
           value={until}
           onChange={(e) => setUntil(e.target.value)}
           min={since || undefined}