CleenUI · Forms · DatePicker

DatePicker

Calendar-based date selection with min/max constraints, ranges, and time-of-day extensions.

storybook.cleenui.com
Open Storybook
Live preview

Interactive DatePicker preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About DatePicker

DatePicker is the calendar primitive. Single-date and date-range modes share the same trigger and popover. Time-of-day mode adds hour and minute fields to capture full datetimes.

Min and max constraints prevent invalid selections; preset ranges (Last 7 days, This month, Last quarter) appear as a sidebar shortcut for analytics use cases. Timezone-aware mode parses and emits ISO 8601 strings in the user's configured timezone.

When to use it

  • Single-date birthday or expiry capture.
  • Date-range filters for reports and analytics.
  • Appointment scheduling with time-of-day.
  • Constrained windows (e.g. only future dates, only weekdays).

Common props

Prop
Type
Description
mode
"single" | "range" | "datetime"
Selection mode.
min
Date | string
Earliest selectable date.
max
Date | string
Latest selectable date.
presets
Preset[]
Sidebar shortcuts like "Last 7 days".
timezone
string
IANA timezone identifier.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.