update App.js, src/components/DateRangePicker/index.js and src/components/TestComponentNew/index.js

src/App.js

@@ -171,7 +171,7 @@ function App() {
         {/* <IndianaDragScroll /> */}
         {/* <IconText /> */}
         {/* <CustomToast /> */}
-        {/* <DateRangePicker /> */}
+        <DateRangePicker />
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/DateRangePicker/index.js

@@ -37,7 +37,7 @@ function CustomRangeInput({ openCalendar, value }) {
   // let from = value[0] || "";
   // let to = value[1] || "";
 
-  value = from && to ? "از " + from + "، تا " + to": from
+  // value = from && to ? "از " + from + "، تا " + to": from
   useEffect(() => {
     openCalendar();
   }, []);

src/components/TestComponentNew/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState, useEffect } from "react";
 
 import "./index.scss";
 
@@ -8,7 +8,52 @@ import DatePicker from "react-multi-date-picker";
 import persian from "react-date-object/calendars/persian";
 import persian_fa from "react-date-object/locales/persian_fa";
 
+//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
+const weekDays = [
+  "شنبه",
+  "یکشنبه",
+  "دوشنبه",
+  "سشنبه",
+  "چهارشنبه",
+  "پنجشنبه",
+  "جمعه",
+];
+
+function DisablePassedDaies({ direction, handleClick, disabled }) {
+  return (
+    <i
+      onClick={handleClick}
+      style={{
+        padding: "0 10px",
+        fontWeight: "bold",
+        color: disabled ? "gray" : "blue",
+      }}
+      className={disabled ? "cursor-default" : "cursor-pointer"}
+    >
+      {direction === "right" ? ">" : "<"}
+    </i>
+  );
+}
+
+function CustomRangeInput({ openCalendar, value }) {
+  // let from = value[0] || "";
+  // let to = value[1] || "";
+
+  // value = from && to ? "از " + from + "، تا " + to": from
+  useEffect(() => {
+    openCalendar();
+  }, []);
+
+  return (
+    <div>
+      <input onFocus={openCalendar} value={value[0]} readOnly />
+      <input onFocus={openCalendar} value={value[1]} readOnly />
+    </div>
+  );
+}
 const TestComponentNew = () => {
+  const [shouldOpenCalendar, setShouldOpenCalendar] = useState(false);
+
   return (
     <div
       className="bg-pink-100 w-1/2 mx-auto mt-20"
@@ -17,13 +62,18 @@ const TestComponentNew = () => {
       <Calendar calendar={persian} locale={persian_fa} />
       <hr className="my-20" />
       <DatePicker
+        range
         calendar={persian}
         locale={persian_fa}
         fixMainPosition={true}
         fixRelativePosition={true}
-        calendarPosition={`${"bottom"}-${"center"}`}
+        calendarPosition={`${"top"}-${"center"}`}
         onClose={() => false}
         arrow={false}
+        minDate={new Date()}
+        renderButton={<DisablePassedDaies />}
+        render={<CustomRangeInput />}
+        weekDays={weekDays}
         inputClass="custom-input"
         className="custom-calendar"
         style={{