Forms

DatePicker

A date picked from a calendar in a popover: a day, a range with quick presets, a month or a year. The trigger has the look of an Input and takes a Field's label and error. It closes on a pick, or when a range has both ends. appearance="inline" drops the frame for a toolbar.

view .md

Preview

date

period

month

year

Installation

terminal

bash

npx @entrepta/cli@latest add date-picker

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

date-picker.tsx

tsx

import { DatePicker } from "@/components/entrepta/date-picker"

<Field id="when" label="date">
  <DatePicker value={day} onValueChange={setDay} max={today} />
</Field>

<DatePicker
  aria-label="period"
  mode="range"
  value={range}
  onValueChange={setRange}
  presets={[{ label: "This month", value: { start: "2026-09-01", end: "2026-09-30" } }]}
/>

<DatePicker granularity="month" value="2026-09" onValueChange={setMonth} />

Props

Prop	Type	Default	Description
mode	"single" \| "range"	"single"	A range closes the popover once it has both ends
granularity	"day" \| "month" \| "year"	"day"	The value is YYYY-MM-DD, YYYY-MM or YYYY
presets	{ label; value: { start; end } }[]	-	Ranges one click away, beside the calendar
min / max / isDisabled	string / string / (day) => boolean	-	What cannot be picked
appearance	"field" \| "inline"	"field"	inline drops the field's frame