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 ( + 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";