update src/components/DateRangePicker/index.js

src/components/DateRangePicker/index.js

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 import { Calendar } from "react-multi-date-picker";
 
 import persian from "react-date-object/calendars/persian";
 import persian_fa from "react-date-object/locales/persian_fa";
 import DatePanel from "react-multi-date-picker/plugins/date_panel";
+import DatePicker from "react-multi-date-picker";
 
 const weekDays = [
   "شنبه",
@@ -32,35 +33,39 @@ function CustomButton({ direction, handleClick, disabled }) {
   );
 }
 
-// function CustomRangeInput({openCalendar, value}) {
-//   let from = value[0] || ""
-//   let to = value[1] || ""
+function CustomRangeInput({ openCalendar, value }) {
+  // let from = value[0] || "";
+  // let to = value[1] || "";
 
   // value = from && to ? "از " + from + "، تا " + to": from
+  useEffect(() => {
+    openCalendar();
+  }, []);
 
-//   return (
-//     <input
-//       onFocus={openCalendar}
-//       value={value}
-//       readOnly
-//     />
-//   )
-// }
+  return (
+    <div>
+      <input onFocus={openCalendar} value={value[0]} readOnly />
+      <input onFocus={openCalendar} value={value[1]} readOnly />
+    </div>
+  );
+}
 
 const DateRangePicker = () => {
+  const [shouldOpenCalendar, setShouldOpenCalendar] = useState(true);
+
   return (
     <>
-      <Calendar
-        arrow={<div style={{ backgroundColor: "red" }}>arrow</div>}
+      <DatePicker
+        arrow={false}
         range
         calendar={persian}
         locale={persian_fa}
         weekDays={weekDays}
         minDate={new Date()}
         renderButton={<CustomButton />}
-        // render={<CustomRangeInput />}
+        render={<CustomRangeInput />}
         calendarPosition="bottom-right"
-        plugins={[<DatePanel position="bottom" />]}
+        // plugins={[<DatePanel position="bottom" />]}
       />
     </>
   );