DatePicker

DatePicker allows users to select dates from a calendar interface. Use for scheduling, filtering by date, or recording timestamps.

Preview

Light Dark OLED

Global

December 13, 2025📅

---

Basic Usage

Light Dark OLED

Global

December 13, 2025📅

const [date, setDate] = useState<Date | null>(null);

<DatePicker
  value={date}
  onValueChange={setDate}
  label="Reading Date"
/>

---

With Label

Light Dark OLED

Global

READING DATE

December 13, 2025📅

<DatePicker
  value={date}
  onValueChange={setDate}
  label="Reading Date"
/>

---

Placeholder

Light Dark OLED

Global

BIRTH DATE

Select date📅

<DatePicker
  value={null}
  onValueChange={setDate}
  label="Birth Date"
  placeholder="Select date"
/>

---

Min/Max Dates

Light Dark OLED

Global

APPOINTMENT (NEXT 30 DAYS)

Select date📅

<DatePicker
  value={date}
  onValueChange={setDate}
  label="Appointment"
  minDate={new Date()}
  maxDate={addDays(new Date(), 30)}
/>

---

Calendar Interface

The calendar modal shows a full month view with navigation.

Light Dark OLED

Global

‹December 2025›

SunMonTueWedThuFriSat

301234567891011121314151617181920

CancelToday

---

Disabled

Light Dark OLED

Global

DATE

December 13, 2025📅

<DatePicker
  value={date}
  onValueChange={setDate}
  disabled
/>

---

API Reference

DatePicker Props

Prop	Type	Default	Description
value	Date | null	Required	Selected date
onValueChange	(date: Date) => void	Required	Change handler
minDate	Date	-	Minimum selectable date
maxDate	Date	-	Maximum selectable date
label	string	-	Label above picker
placeholder	string	'Select date'	Placeholder text
disabled	boolean	false	Disabled state
formatDate	(date: Date) => string	-	Custom format function
style	ViewStyle	-	Custom styles
accessibilityLabel	string	-	Screen reader label