Date Picker

lunar add date-picker

import {
DatePicker,
DatePickerTrigger,
DatePickerContent,
DatePickerValue,
} from '@/components/ui/date-picker';

const [date, setDate] = useState<Date>();
 
<DatePicker value={date} onValueChange={setDate}>
<DatePickerTrigger>
  <DatePickerValue placeholder="Select a date" />
</DatePickerTrigger>
<DatePickerContent />
</DatePicker>

// Date picker (default)
<DatePicker variant="date" value={date} onValueChange={setDate}>
{/* ... */}
</DatePicker>
 
// Month picker
<DatePicker variant="month" value={date} onValueChange={setDate}>
{/* ... */}
</DatePicker>
 
// Year picker
<DatePicker variant="year" value={date} onValueChange={setDate}>
{/* ... */}
</DatePicker>

// Default - bordered input look
<DatePicker value={date} onValueChange={setDate} triggerVariant="default">
{/* ... */}
</DatePicker>
 
// Outline
<DatePicker value={date} onValueChange={setDate} triggerVariant="outline">
{/* ... */}
</DatePicker>
 
// Filled
<DatePicker value={date} onValueChange={setDate} triggerVariant="filled">
{/* ... */}
</DatePicker>

<DatePicker value={date} onValueChange={setDate} triggerSize="sm">
{/* ... */}
</DatePicker>
 
<DatePicker value={date} onValueChange={setDate} triggerSize="md">
{/* ... */}
</DatePicker>
 
<DatePicker value={date} onValueChange={setDate} triggerSize="lg">
{/* ... */}
</DatePicker>

<DatePickerValue 
placeholder="Pick a date"
format="YYYY-MM-DD"
/>
 
<DatePickerValue 
placeholder="Pick a date"
format="DD/MM/YYYY"
/>
 
<DatePickerValue 
placeholder="Pick a date"
format="MMMM D, YYYY"  // December 25, 2024
/>

<DatePicker
value={date}
onValueChange={setDate}
minDate={new Date()}
maxDate={new Date(2025, 11, 31)}
>
<DatePickerTrigger>
  <DatePickerValue placeholder="Select a future date" />
</DatePickerTrigger>
<DatePickerContent />
</DatePicker>

<DatePickerValue 
placeholder="Select date"
showIcon={false}
/>