change design calendar booking

app/component/date/datePicker/NextIconDatePicker.js

@@ -0,0 +1,21 @@
+import { Button } from "@mui/material";
+import Image from "next/image";
+
+function NextIconDatePicker({ nextIconDatePicker }) {
+  return (
+    <Button
+      className="!min-w-0 !p-0 !rounded-full"
+      ref={nextIconDatePicker}
+      onClick={(e) => e.preventDefault()}
+    >
+      <Image
+        src="/assets/icons/arrow-right.svg"
+        className="icon-left-datepicker"
+        height={24}
+        width={24}
+      />
+    </Button>
+  );
+}
+
+export default NextIconDatePicker;

app/component/date/datePicker/PrevIconDatePicker.js

@@ -0,0 +1,21 @@
+import { Button } from "@mui/material";
+import Image from "next/image";
+
+function PrevIconDatePicker({ prevIconDatePicker }) {
+  return (
+    <Button
+      className="!min-w-0 !p-0 !rounded-full !rotate-180"
+      ref={prevIconDatePicker}
+      onClick={(e) => e.preventDefault()}
+    >
+      <Image
+        src="/assets/icons/arrow-right.svg"
+        className="icon-left-datepicker"
+        height={24}
+        width={24}
+      />
+    </Button>
+  );
+}
+
+export default PrevIconDatePicker;

app/component/date/datePicker/index.js

@@ -4,9 +4,12 @@ import { useEffect, useRef, useState } from "react";
 import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
 import Image from "next/image";
 import { Button, Skeleton } from "@mui/material";
+import NextIconDatePicker from "./NextIconDatePicker";
+import PrevIconDatePicker from "./PrevIconDatePicker";
 
 function DatePicker({ date, updateDate }) {
   const nextIconDatePicker = useRef();
+  const prevIconDatePicker = useRef();
 
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState();
@@ -42,11 +45,19 @@ function DatePicker({ date, updateDate }) {
 
   return (
     <div className="flex items-start justify-evenly w-full">
-      <div className="w-1/2 relative flex justify-center">
+      <div className="w-full md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
         <DatePickerJalali
           value={startDate}
           className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
           timePicker={false}
+          nextIcon={
+            <div className="flex md:hidden lg:flex xl:hidden">
+              <NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
+            </div>
+          }
+          prevIcon={
+            <PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
+          }
           onChange={handleStartDateChange}
           disabledDates={(e) => handleDisableDate(e)}
         />
@@ -65,18 +76,12 @@ function DatePicker({ date, updateDate }) {
             timePicker={false}
             className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
             nextIcon={
-              <Button
+              <NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
-                className="!min-w-0 !p-0 !rounded-full"
+            }
-                ref={nextIconDatePicker}
+            prevIcon={
-                onClick={(e) => e.preventDefault()}
+              <div className="flex md:hidden lg:flex xl:hidden">
-              >
+                <PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
-                <Image
+              </div>
-                  src="/assets/icons/arrow-right.svg"
-                  className="icon-left-datepicker"
-                  height={24}
-                  width={24}
-                />
-              </Button>
             }
             onChange={handleEndDateChange}
             disabledDates={(e) => handleDisableDate(e)}

components/booking/date/index.js

@@ -4,7 +4,7 @@ import Time from "./Time";
 import PlaceVisit from "./PlaceVisit";
 
 function Date({ doctor, setStep }) {
-  const [locateVisit, setLocateVisit] = useState();
+  const [locateVisit, setLocateVisit] = useState(true);
   const [isError, setIsError] = useState(false);
 
   return (