feat(mui): add MonthField kit primitive (year+month picker, yyyy-MM string I/O)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
40
src/admin/ui/MonthField.tsx
Normal file
40
src/admin/ui/MonthField.tsx
Normal file
@@ -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 (
|
||||||
|
<DatePicker
|
||||||
|
label={label}
|
||||||
|
disabled={disabled}
|
||||||
|
minDate={minDate}
|
||||||
|
maxDate={maxDate}
|
||||||
|
views={["year", "month"]}
|
||||||
|
openTo="month"
|
||||||
|
value={parsed && isValid(parsed) ? parsed : null}
|
||||||
|
onChange={(d) => onChange(d && isValid(d) ? format(d, "yyyy-MM") : "")}
|
||||||
|
format="MM.yyyy"
|
||||||
|
slotProps={{ textField: { size: "small", fullWidth: true } }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -16,6 +16,7 @@ export { Tabs, TabPanel } from "./Tabs";
|
|||||||
export type { TabDef } from "./Tabs";
|
export type { TabDef } from "./Tabs";
|
||||||
export { default as Pagination } from "./Pagination";
|
export { default as Pagination } from "./Pagination";
|
||||||
export { default as DateField } from "./DateField";
|
export { default as DateField } from "./DateField";
|
||||||
|
export { default as MonthField } from "./MonthField";
|
||||||
export { default as PageHeader } from "./PageHeader";
|
export { default as PageHeader } from "./PageHeader";
|
||||||
export { default as EmptyState } from "./EmptyState";
|
export { default as EmptyState } from "./EmptyState";
|
||||||
export { default as LoadingState } from "./LoadingState";
|
export { default as LoadingState } from "./LoadingState";
|
||||||
|
|||||||
Reference in New Issue
Block a user