update src/components/Datepicker/Calender/index.js and src/components/Datepicker/CalenderList/index.js

src/components/Datepicker/Calender/index.js

@@ -14,15 +14,15 @@ const weekDays = [
   "جمعه",
 ];
 
-const Calender = ({ minimumDate, maximumDate }) => {
-  const [date, setDate] = useState("1401/01/01");
+const Calender = ({ minDate, maxDate }) => {
+  const [date, setDate] = useState(null);
   return (
     <div className="calender-list">
       <Calendar
         onChange={setDate}
-        value={date}
-        minDate="1401/01/01"
-        maxDate="1401/01/01"
+        value={minDate}
+        minDate={minDate}
+        maxDate={maxDate}
         weekDays={weekDays}
         calendar={persian}
         locale={persian_fa}

src/components/Datepicker/CalenderList/index.js

@@ -5,8 +5,6 @@ import Button from "../../ButtonDesign/Button";
 import SearchBox from "../../SearchDesign/SearchBox";
 
 const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
-  // const [date, setDate] = useState("1401/02/01");
-
   return (
     <div className="flex flex-col bg-white mx-auto p-5">
       <div className="w-[96%] mx-auto flex flex-row items-center justify-between mb-7">
@@ -37,18 +35,18 @@ const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
       </div>
       {/* ? calender list */}
       <div className="flex flex-wrap justify-around mx-auto gap-x-5">
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
-        <Calender />
+        <Calender minDate="1401/01/01" maxDate="1401/01/31" />
+        <Calender minDate="1401/02/01" maxDate="1401/02/31" />
+        <Calender minDate="1401/03/01" maxDate="1401/03/31" />
+        <Calender minDate="1401/04/01" maxDate="1401/04/31" />
+        <Calender minDate="1401/05/01" maxDate="1401/05/31" />
+        <Calender minDate="1401/06/01" maxDate="1401/06/31" />
+        <Calender minDate="1401/07/01" maxDate="1401/07/30" />
+        <Calender minDate="1401/08/01" maxDate="1401/08/30" />
+        <Calender minDate="1401/09/01" maxDate="1401/09/30" />
+        <Calender minDate="1401/10/01" maxDate="1401/10/30" />
+        <Calender minDate="1401/11/01" maxDate="1401/11/30" />
+        <Calender minDate="1401/12/01" maxDate="1401/12/30" />
       </div>
     </div>
   );