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/FuelFormModal.vue

@@ -4,6 +4,7 @@ import { api } from "../api";
 import { applyAttachment } from "../lib/attachment.js";
 import { t, tSplit } from "../i18n";
 import AttachmentField from "./AttachmentField.vue";
+import DateField from "./DateField.vue";
 import Modal from "./Modal.vue";
 
 const props = defineProps({
@@ -82,7 +83,7 @@ function payload() {
       <div class="grid grid-cols-2 gap-2">
         <div>
           <label class="dh-label">{{ t("forms.fuel.date") }}</label>
-          <input v-model="form.date" type="date" required class="dh-input data" />
+          <DateField v-model="form.date" required />
         </div>
         <div>
           <label class="dh-label">{{ t("forms.fuel.odometer") }}</label>