added .pnp files

.gitignore

@@ -4,6 +4,9 @@
 /node_modules
 /.pnp
 .pnp.js
+# .pnp.cjs
+# .pnp.loader.mjs
+.yarn
 
 /.idea
 /.vscode

package.json

@@ -17,6 +17,7 @@
     "react-calendar": "^4.0.0",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
+    "react-datepicker": "^4.10.0",
     "react-dom": "^18.0.0",
     "react-lottie": "^1.2.3",
     "react-redux": "^8.0.2",

src/components/Reminders/AddEditReminder.jsx

@@ -3,6 +3,9 @@ import Layout from '../Partials/Layout'
 import { Link, useNavigate, useLocation, useParams } from 'react-router-dom'
 
 // import { toast } from 'react-toastify';
+import DatePicker from "react-datepicker";
+
+import "react-datepicker/dist/react-datepicker.css";
 
 import InputCom from "../Helpers/Inputs/InputCom";
 import Calendar from 'react-calendar';
@@ -185,7 +188,8 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Start Date</label>
-                <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" />
+                {/* <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" /> */}
+                <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} value={reminder.start_date} />
               </div>
               <div className="field w-full">
                 {/* <InputCom
@@ -196,7 +200,8 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">End Date</label>
-                <Calendar onChange={setEndDate} value={reminder.end_date} calendarType="US" />
+                {/* <Calendar onChange={setEndDate} value={reminder.end_date} calendarType="US" /> */}
+                <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} value={reminder.end_date} />
               </div>
             </div>