Date Range Picker

lunar add date-range-picker

import {
DateRangePicker,
DateRangePickerTrigger,
DateRangePickerContent,
DateRangePickerValue,
} from '@/components/ui/date-range-picker';

const [startDate, setStartDate] = useState<Date>();
const [endDate, setEndDate] = useState<Date>();
 
<DateRangePicker
startDate={startDate}
endDate={endDate}
onRangeChange={(start, end) => {
  setStartDate(start);
  setEndDate(end);
}}
>
<DateRangePickerTrigger>
  <DateRangePickerValue placeholder="Select date range" />
</DateRangePickerTrigger>
<DateRangePickerContent />
</DateRangePicker>

<DateRangePicker
startDate={startDate}
endDate={endDate}
onRangeChange={handleRangeChange}
minDate={new Date()}
maxDate={new Date(2025, 11, 31)}
>
{/* ... */}
</DateRangePicker>

<DateRangePicker
startDate={startDate}
endDate={endDate}
onRangeChange={handleRangeChange}
maxDays={7}  // Maximum 7 days selection
>
{/* ... */}
</DateRangePicker>

// Default
<DateRangePicker variant="default" {...props}>
{/* ... */}
</DateRangePicker>
 
// Outline
<DateRangePicker variant="outline" {...props}>
{/* ... */}
</DateRangePicker>
 
// Filled
<DateRangePicker variant="filled" {...props}>
{/* ... */}
</DateRangePicker>

<DateRangePicker size="sm" {...props}>
{/* ... */}
</DateRangePicker>
 
<DateRangePicker size="md" {...props}>
{/* ... */}
</DateRangePicker>
 
<DateRangePicker size="lg" {...props}>
{/* ... */}
</DateRangePicker>

<DateRangePickerValue
placeholder="Choose dates"
format="DD/MM/YYYY"
/>
 
<DateRangePickerValue
placeholder="Choose dates"
format="MMMM D, YYYY"
/>