A date typed in the order you chose, not the browser's

Settings › Date format steered every date the app printed, but not one it
asked for: `<input type="date">` renders in the browser's own locale and no
page setting can move it, so DD-MM-YYYY tables sat above 08/22/2026 boxes.

DateField takes over the typing half — a masked box whose segment order comes
from the same prefs.dateFormat lib/format.js reads — and leaves the picking
half to the browser, behind a calendar button. The value in and out stays ISO,
so no caller changed. Native validation now also catches a full-but-impossible
date; the old input let a half-typed one through as no date at all.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Web App/web/src/components/ReminderFormModal.vue

@@ -3,6 +3,7 @@ import { ref, computed } from "vue";
 import { api } from "../api";
 import { formatKm } from "../lib/format.js";
 import { t } from "../i18n";
+import DateField from "./DateField.vue";
 import Modal from "./Modal.vue";
 
 const props = defineProps({
@@ -93,7 +94,7 @@ function payload() {
         <div class="grid grid-cols-2 gap-2">
           <div>
             <label class="dh-label">{{ t("forms.reminder.onDate") }}</label>
-            <input v-model="form.dueDate" type="date" class="dh-input data" />
+            <DateField v-model="form.dueDate" />
           </div>
           <div>
             <label class="dh-label">{{ t("forms.reminder.atOdometer") }}</label>