🛠️ Refactor date handling logic

📅 Update date picker component
✨ Add custom header for two-month view
🎨 Improve date rendering
🚀 Initial implementation of SectionDateRange component
🩹 Fix date range selection issue
📝 Update documentation for SectionDateRange component
🐛 Fix bugs related to date handling
🌟 Implement advanced date selection feature

src/app/(listing-detail)/SectionDateRange.tsx

@@ -0,0 +1,55 @@
+import React, { FC, Fragment, useState } from "react";
+import DatePicker from "react-datepicker";
+import DatePickerCustomHeaderTwoMonth from "@/components/DatePickerCustomHeaderTwoMonth";
+import DatePickerCustomDay from "@/components/DatePickerCustomDay";
+
+const SectionDateRange = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2023/02/06")
+  );
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2023/02/23"));
+  const onChangeDate = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const renderSectionCheckIndate = () => {
+    return (
+      <div className="listingSection__wrap overflow-hidden">
+        {/* HEADING */}
+        <div>
+          <h2 className="text-2xl font-semibold">Availability</h2>
+          <span className="block mt-2 text-neutral-500 dark:text-neutral-400">
+            Prices may increase on weekends or holidays
+          </span>
+        </div>
+        <div className="w-14 border-b border-neutral-200 dark:border-neutral-700"></div>
+        {/* CONTENT */}
+
+        <div className="">
+          <DatePicker
+            selected={startDate}
+            onChange={onChangeDate}
+            startDate={startDate}
+            endDate={endDate}
+            selectsRange
+            monthsShown={2}
+            showPopperArrow={false}
+            inline
+            renderCustomHeader={(p) => (
+              <DatePickerCustomHeaderTwoMonth {...p} />
+            )}
+            renderDayContents={(day, date) => (
+              <DatePickerCustomDay dayOfMonth={day} date={date} />
+            )}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return renderSectionCheckIndate();
+};
+
+export default SectionDateRange;