Browse Source

🛠️ Refactor component structure for better organization

📅 Add date range picker functionality
🎨 Improve styling for RentalCarDatesRangeInput component
🚀 Implement clear date button feature
🐛 Fix date display issue in the component
📚 Update documentation for RentalCarDatesRangeInput
🧪 Test date range functionality thoroughly
 Add missing prop types and type checking
♻️ Simplify code in RentalCarDatesRangeInput component
main
John Doe 1 year ago
parent
commit
e6ace2732a
  1. 118
      src/app/(listing-detail)/listing-car-detail/RentalCarDatesRangeInput.tsx

118
src/app/(listing-detail)/listing-car-detail/RentalCarDatesRangeInput.tsx

@ -0,0 +1,118 @@
"use client";
import React, { Fragment, useState } from "react";
import { FC } from "react";
import DatePicker from "react-datepicker";
import { Popover, Transition } from "@headlessui/react";
import { CalendarIcon } from "@heroicons/react/24/outline";
import DatePickerCustomHeaderTwoMonth from "@/components/DatePickerCustomHeaderTwoMonth";
import DatePickerCustomDay from "@/components/DatePickerCustomDay";
import ClearDataButton from "@/app/(client-components)/(HeroSearchForm)/ClearDataButton";
export interface RentalCarDatesRangeInputProps {
className?: string;
}
const RentalCarDatesRangeInput: FC<RentalCarDatesRangeInputProps> = ({
className = "",
}) => {
const [startDate, setStartDate] = useState<Date | null>(
new Date("2023/03/01")
);
const [endDate, setEndDate] = useState<Date | null>(new Date("2023/03/16"));
const onChangeDate = (dates: [Date | null, Date | null]) => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
};
const renderInput = () => {
return (
<>
<div className="text-neutral-300 dark:text-neutral-400">
<CalendarIcon className="w-5 h-5 lg:w-7 lg:h-7" />
</div>
<div className="flex-grow text-left">
<span className="block xl:text-lg font-semibold">
{startDate?.toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
}) || "Add dates"}
{endDate
? " - " +
endDate?.toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
})
: ""}
</span>
<span className="block mt-1 text-sm text-neutral-400 leading-none font-light">
{"Pick up - Drop off"}
</span>
</div>
</>
);
};
return (
<>
<Popover
className={`RentalCarDatesRangeInput relative flex w-full ${className}`}
>
{({ open }) => (
<>
<div
className={`flex-1 flex items-center focus:outline-none rounded-2xl ${
open ? "shadow-lg" : ""
}`}
>
<Popover.Button
className={`flex-1 flex relative p-3 items-center space-x-3 focus:outline-none `}
>
{renderInput()}
{startDate && open && (
<ClearDataButton onClick={() => onChangeDate([null, null])} />
)}
</Popover.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-10 mt-3 top-full right-0 xl:-right-10 w-screen max-w-sm px-4 sm:px-0 lg:max-w-3xl">
<div className="overflow-hidden rounded-3xl shadow-lg ring-1 ring-black ring-opacity-5 bg-white dark:bg-neutral-800 p-8">
<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>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</>
);
};
export default RentalCarDatesRangeInput;
Loading…
Cancel
Save