update src/components/DateRangePicker/index.js and src/components/TestComponentNew/index.scss

src/components/DateRangePicker/index.js

@@ -1,12 +1,14 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
+
+import "./index.scss";
 
 import { Calendar } from "react-multi-date-picker";
+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";
-import DatePanel from "react-multi-date-picker/plugins/date_panel";
-import DatePicker from "react-multi-date-picker";
 
+//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
 const weekDays = [
   "شنبه",
   "یکشنبه",
@@ -17,58 +19,50 @@ const weekDays = [
   "جمعه",
 ];
 
-function CustomButton({ 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 className="flex flex-row items-center ">
+      <input
+        className="w-full py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
+        onFocus={openCalendar}
+        value={value[0]}
+        readOnly
+      />
+      <p className="mx-2 text-sm">تا</p>
+      <input
+        className="w-full py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
+        onFocus={openCalendar}
+        value={value[1]}
+        readOnly
+      />
     </div>
   );
 }
 
 const DateRangePicker = () => {
-  const [shouldOpenCalendar, setShouldOpenCalendar] = useState(true);
-
   return (
-    <>
+    <div className="w-1/2 mx-auto" style={{ direction: "rtl" }}>
+      <Calendar calendar={persian} locale={persian_fa} />
+      <hr className="my-20" />
       <DatePicker
-        arrow={false}
         range
         calendar={persian}
         locale={persian_fa}
-        weekDays={weekDays}
+        fixMainPosition={true}
+        fixRelativePosition={true}
+        calendarPosition={`${"top"}-${"center"}`}
+        offsetY={"10"}
+        onClose={() => false}
+        arrow={false}
         minDate={new Date()}
-        renderButton={<CustomButton />}
         render={<CustomRangeInput />}
-        onClose={() => false}
-        calendarPosition="bottom-right"
-        // plugins={[<DatePanel position="bottom" />]}
+        weekDays={weekDays}
       />
-    </>
+    </div>
   );
 };
 

src/components/DateRangePicker/index.scss

@@ -0,0 +1,42 @@
+.rmdp-arrow-container {
+  background-color: #3b98f3;
+  border-radius: 2px !important;
+  height: 24px !important;
+  width: 24px !important;
+}
+
+.rmdp-arrow-container .rmdp-arrow {
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  margin-top: 8px !important;
+}
+
+.rmdp-wrapper .start {
+  background: #3b98f3 !important;
+  color: #fff !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-top-right-radius: 4px !important;
+  border-bottom-right-radius: 4px !important;
+}
+
+.rmdp-wrapper .end {
+  background: #3b98f3 !important;
+  color: #fff !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+}
+
+.rmdp-range {
+  background: #f7f7f7 !important;
+  color: #3b98f3 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.rmdp-header-values span {
+  color: #12508e !important;
+  font-weight: bold !important;
+}

src/components/TestComponentNew/index.scss

@@ -5,10 +5,6 @@
   width: 24px !important;
 }
 
-.rmpd-day.rmdp-range.start {
-  background: red !important;
-}
-
 .rmdp-arrow-container .rmdp-arrow {
   border: solid #fff;
   border-width: 0 2px 2px 0;
@@ -18,14 +14,21 @@
 .rmdp-wrapper .start {
   background: #0074d9 !important;
   color: #fff !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 
 .rmdp-wrapper .end {
   background: #0074d9 !important;
   color: #fff !important;
+  box-shadow: none !important;
+
+  border: none !important;
 }
 
 .rmdp-range {
-  background: #f5f5f5 !important;
+  background: #f7f7f7 !important;
   color: #0074d9 !important;
+  border: none !important;
+  box-shadow: none !important;
 }