fetaUI
GitHub

Date Picker

A pill field that opens a month in a floating surface.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/date-picker
Playground
Selected
Range with quick picks
Dropdown
With time
Natural language
Invalid and disabled
Mode
Icons animation
Invalid
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/date-picker

Selected

The field shows the chosen date. Picking one closes the month and returns focus.

Invalid
Disabled
Motion

Accessibility

  • The trigger reports aria-expanded and opens a labelled dialog.
  • Focus returns to the field when a date is picked.

Motion

  • The month opens under the field in 180 ms.
  • The field value crossfades.
  • With reduced motion, the month appears at once.

Responsive behavior

  • 300 px wide on Web and full width on Mobile.
  • Quick picks hide on Mobile.

Performance

  • The Calendar mounts only while open.
  • natural parses text on each keystroke with a small local parser, with no library.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import DatePicker from @/components/fetaui/date-picker. It composes Calendar and Button, and works inside Field.
  • presets needs mode="range", counted in days back from today. withTime and natural need single mode.
  • withTime disables past days. Read onTimeChange for the time.
  • natural reads plain English dates such as tomorrow, next friday, in 3 days and Nov 12, and has no month popup.
/docs/components/date-picker/markdown
PreviousCalendar
NextAmount Pad

Related

CalendarComponentPick a date, a range, or a date and a time. Six rows always, so the height never jumps.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.Time FieldComponentA segmented time input. Each part is a spin button you can type into or step.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.