55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
|
import { Box } from "@mui/material";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { Condition } from "./ConditionBox.tsx";
|
||
|
|
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
|
||
|
|
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
|
||
|
|
export const DateTimeCondition = ({
|
||
|
|
condition,
|
||
|
|
onChange,
|
||
|
|
field,
|
||
|
|
}: {
|
||
|
|
onChange: (condition: Condition) => void;
|
||
|
|
condition: Condition;
|
||
|
|
field: string;
|
||
|
|
}) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
return (
|
||
|
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
gap: 1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DateTimePicker
|
||
|
|
localeText={{
|
||
|
|
clearButtonLabel: "Vider",
|
||
|
|
}}
|
||
|
|
label={t("application:navbar.notBefore")}
|
||
|
|
// @ts-ignore
|
||
|
|
value={dayjs.unix(condition[field + "_gte"] as number)}
|
||
|
|
onChange={(newValue) =>
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
[field + "_gte"]: newValue ? newValue.unix() : 0,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<DateTimePicker
|
||
|
|
label={t("application:navbar.notAfter")}
|
||
|
|
// @ts-ignore
|
||
|
|
value={dayjs.unix(condition[field + "_lte"] as number)}
|
||
|
|
onChange={(newValue) =>
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
[field + "_lte"]: newValue ? newValue.unix() : 0,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</LocalizationProvider>
|
||
|
|
);
|
||
|
|
};
|