From 58a3bcad7017f0da431c850933694b9cc6c10bda Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sat, 6 Jun 2026 21:23:55 +0200
Subject: [PATCH] =?UTF-8?q?feat(mui):=20kit=20=E2=80=94=20DateField=20over?=
 =?UTF-8?q?=20MUI=20X=20(date-fns=20v4,=20cs=20locale)=20+=20LocalizationP?=
 =?UTF-8?q?rovider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/ui/DateField.tsx | 37 +++++++++++++++++++++++++++++++++++++
 src/admin/ui/index.ts      |  1 +
 2 files changed, 38 insertions(+)
 create mode 100644 src/admin/ui/DateField.tsx

diff --git a/src/admin/ui/DateField.tsx b/src/admin/ui/DateField.tsx
new file mode 100644
index 0000000..229fe9b
--- /dev/null
+++ b/src/admin/ui/DateField.tsx
@@ -0,0 +1,37 @@
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { parseISO, format, isValid } from "date-fns";
+
+/**
+ * Date input over MUI X DatePicker. String in / string out ("yyyy-MM-dd", or ""),
+ * so it drops into existing form state. cs locale + dd.MM.yyyy display are provided
+ * by the LocalizationProvider in MuiProvider.
+ */
+export default function DateField({
+  value,
+  onChange,
+  label,
+  disabled,
+  minDate,
+  maxDate,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  disabled?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+}) {
+  const parsed = value ? parseISO(value) : null;
+  return (
+    <DatePicker
+      label={label}
+      disabled={disabled}
+      minDate={minDate}
+      maxDate={maxDate}
+      value={parsed && isValid(parsed) ? parsed : null}
+      onChange={(d) => onChange(d && isValid(d) ? format(d, "yyyy-MM-dd") : "")}
+      format="dd.MM.yyyy"
+      slotProps={{ textField: { size: "small", fullWidth: true } }}
+    />
+  );
+}
diff --git a/src/admin/ui/index.ts b/src/admin/ui/index.ts
index 02a9527..276f3d0 100644
--- a/src/admin/ui/index.ts
+++ b/src/admin/ui/index.ts
@@ -15,3 +15,4 @@ export { default as Alert } from "./Alert";
 export { Tabs, TabPanel } from "./Tabs";
 export type { TabDef } from "./Tabs";
 export { default as Pagination } from "./Pagination";
+export { default as DateField } from "./DateField";