A component for selecting dates with platform-specific pickers and multiple style variants

DatePicker

A component that allows users to select dates with a platform-optimized calendar interface, available in multiple style variants.

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 text for the input field
`placeholder`	`string`	`'Select date'`	Placeholder text when no date is selected
`variant`	`'animated' \| 'classic' \| 'underlined'`	`'animated'`	Style variant of the date picker
`maxDate`	`Date`	—	Maximum selectable date
`minDate`	`Date`	—	Minimum selectable date
`error`	`string`	—	Error message to display
`containerClassName`	`string`	—	Additional classes for container

Variants

Animated (Default)

<DatePicker
  label="Event Date"
  value={date}
  onChange={setDate}
  variant="animated"
/>

Classic

<DatePicker
  label="Event Date"
  value={date}
  onChange={setDate}
  variant="classic"
/>

Underlined

<DatePicker
  label="Event Date"
  value={date}
  onChange={setDate}
  variant="underlined"
/>

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

On this page