diff --git a/src/components/RangeDatePicker/index.js b/src/components/RangeDatePicker/index.js
new file mode 100644
index 0000000..ec238e2
--- /dev/null
+++ b/src/components/RangeDatePicker/index.js
@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import "../Calendar/index.css";
+import DatePicker from "react-modern-calendar-datepicker";
+
+const RangeDatePicker = () => {
+    const [selectedDayRange, setSelectedDayRange] = useState({
+      from: null,
+      to: null
+    });
+    return (
+      <DatePicker
+        value={selectedDayRange}
+        onChange={setSelectedDayRange}
+        inputPlaceholder="یک بازه زمانی انتخاب کنید"
+        shouldHighlightWeekends
+        locale='fa'
+      />
+    );
+  };
+  
+  export default RangeDatePicker;
\ No newline at end of file
diff --git a/src/redux/data.js b/src/redux/data.js
index a1d772c..432020b 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -24,6 +24,8 @@ import Navbar from "../components/Navbar";
 import SimpleCalendar from '../components/Calendar';
 import Footer from "../components/Footer";
 import SimpleDatePicker from "../components/SimpleDatePicker";
+import RangeDatePicker from '../components/RangeDatePicker';
+
 const components = [
   {
     name: "Button",
@@ -486,6 +488,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "RangeDatePicker",
+    author: "Keshavarzi",
+    props: [],
+    content: {
+      name: "RangeDatePicker",
+      component: <RangeDatePicker />,
+      code: null,
+    },
+  },
 ];
 
 export default components;