Feat: Added component: DateRangeInput

[benbarnett02]

New component: DateRangeInput
DateRangeInput provides similar behaviour to the DateInput component for date ranges, displaying a DateRangePicker in a DropdownWrapper on click of an Input box.

While it can work uncontrolled, it works best with state controlled by a parent component via the value & onChange props (although I can improve the uncontrolled behaviour if that is desired?)

Usage:

// Import
import { DateRangeInput, DateRange } from "@/once-ui/components";

// State
const [selectedRange, setSelectedRange] = useState<DateRange>();

// Use component
<DateRangeInput 
    id={"daterangepicker"} 
    value={selectedRange} 
    onChange={setSelectedRange} 
    startLabel={"Check in"} 
    endLabel={"Check out"} 
/>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
once-ui-starter	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 30, 2025 7:37am

[benbarnett02]

Did some testing and found that it looks pretty terrible in smaller widths so have fixed that.

Before:

After: