DatePicker

A component that allows users to select dates with a platform-optimized calendar interface.

Import

import { DatePicker } from '@/components/forms/DatePicker';

Props

Prop	Type	Default	Description
`value`	`Date`	—	Currently selected date
`onChange`	`(date: Date) => void`	Required	Called when date selection changes
`label`	`string`	—	Label above the date picker
`placeholder`	`string`	`'Select date'`	Placeholder text when no date is selected
`maxDate`	`Date`	—	Maximum selectable date
`minDate`	`Date`	—	Minimum selectable date
`error`	`string`	—	Error message to display
`containerClassName`	`string`	—	Additional classes for container

Basic Usage

const [date, setDate] = useState(new Date());
 
<DatePicker
  label="Event Date"
  value={date}
  onChange={setDate}
/>

With Min/Max Date Range

// Allow only dates in the next 30 days
const today = new Date();
const maxDate = new Date();
maxDate.setDate(today.getDate() + 30);
 
<DatePicker
  label="Appointment Date"
  minDate={today}
  maxDate={maxDate}
  value={selectedDate}
  onChange={setSelectedDate}
/>

With Error State

<DatePicker
  label="Birth Date"
  value={birthDate}
  onChange={setBirthDate}
  error={!birthDate ? "Birth date is required" : ""}
/>

DatePicker

DatePicker

Import

Props

Basic Usage

With Min/Max Date Range

With Error State

On this page