first commit

src/component/FileManager/Search/AdvanceSearch/DateTimeCondition.tsx

@@ -0,0 +1,54 @@
+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>
+  );
+};