Date Picker

Date selection component combining a popover trigger with a calendar. Supports single dates, date ranges, and preset ranges.

Figma: DS-001 Foundations · 334:4051

Import

Live Demo

Date selection with popover calendar and range support.

Basic

Date Picker Range

Date of Birth

Basic (icon left)

Time Picker

Disabled states

Time Input standalone

Props

NameTypeDefaultDescription
mode"single" | "range" | "multiple""single"Date selection mode
disabledboolean | (date: Date) => booleanDisable specific dates or entire picker

Examples

Single Date

Date Range