diff --git a/src/admin/ui/MonthField.tsx b/src/admin/ui/MonthField.tsx new file mode 100644 index 0000000..c1e42db --- /dev/null +++ b/src/admin/ui/MonthField.tsx @@ -0,0 +1,40 @@ +import { DatePicker } from "@mui/x-date-pickers/DatePicker"; +import { parseISO, format, isValid } from "date-fns"; + +/** + * Month input over MUI X DatePicker (year + month views only). String in / + * string out ("yyyy-MM", or ""), matching the legacy AdminDatePicker mode="month" + * so it drops into existing form/filter state. cs locale is provided by the + * LocalizationProvider in MuiProvider. + */ +export default function MonthField({ + 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}-01`) : null; + return ( + onChange(d && isValid(d) ? format(d, "yyyy-MM") : "")} + format="MM.yyyy" + slotProps={{ textField: { size: "small", fullWidth: true } }} + /> + ); +} diff --git a/src/admin/ui/index.ts b/src/admin/ui/index.ts index 82d48d0..8fb006f 100644 --- a/src/admin/ui/index.ts +++ b/src/admin/ui/index.ts @@ -16,6 +16,7 @@ export { Tabs, TabPanel } from "./Tabs"; export type { TabDef } from "./Tabs"; export { default as Pagination } from "./Pagination"; export { default as DateField } from "./DateField"; +export { default as MonthField } from "./MonthField"; export { default as PageHeader } from "./PageHeader"; export { default as EmptyState } from "./EmptyState"; export { default as LoadingState } from "./LoadingState";