design dark mode add-doctor & change field time to date-picker

2024-10-02 13:55:54 +03:30
parent c29c787f09
commit dd61240ed7
8 changed files with 120 additions and 29 deletions
@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
+import { handleTwoLength } from "@/helper";
+
+function TimePickerInput() {
+  const [value, setValue] = useState("00:00");
+
+  return (
+    <div className="w-full relative">
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker
+          ampm={false}
+          format="hh:mm"
+          className="!w-full"
+          views={["hours", "minutes"]}
+          placeholder="انتخاب کنید..."
+          onChange={(e) => {
+            const hours = e.$H;
+            const minute = e.$m;
+            const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
+              minute
+            )}`;
+            setValue(newValue);
+          }}
+          sx={{
+            "& .MuiFormLabel-root": {
+              top: "-4px !important",
+            },
+            "& .MuiInputBase-input": { padding: "12.5px 14px" },
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #D7D7D7 !important",
+            },
+            "& .MuiInputBase-root": {
+              borderRadius: "8px !important",
+            },
+            ".Mui-focused": {
+              "& .MuiOutlinedInput-notchedOutline": {
+                border: "1px solid #5559CE !important",
+                transition: "0.5s all",
+              },
+            },
+            "& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after":
+              {
+                display: "none !important",
+              },
+          }}
+        />
+        <p
+          className="absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+            w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2"
+        >
+          {value}
+        </p>
+      </LocalizationProvider>
+    </div>
+  );
+}
+
+export default TimePickerInput;