Browse Source
🛠️ Refactor component structure for better organization
🛠️ 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 componentmain
John Doe
1 year ago
1 changed files with 118 additions and 0 deletions
@ -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; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue