zedkit
@zedtech/zedkit-ui

Pick a start and end date

Button that opens a range calendar in a popover. Closes when both days are set.

alpha

At a glance

  • Who: Developers collecting a from/to span in a form field.
  • What: Button that opens a range calendar in a popover. Closes when both days are set.
  • Use when: For leave, a report window, or any start-and-end pair.
  • Avoid when: For one day — use the date picker.
  • See also: Pick a date from a popover, Lay out fieldsets, fields, and error lists

Preview

@zedtech/zedkit-ui — DateRangePicker, DateRangePickerProps

Preview

View props table

Install

pnpm add @zedtech/zedkit-ui

Latest: 0.6.4 (via changesets).

Example

Usage
import { DateRangePicker, Field, FieldLabel, type DateRangePickerProps } from "@zedtech/zedkit-ui";
const [span, setSpan] = useState<DateRangePickerProps["value"]>();
<Field>
  <FieldLabel htmlFor="leave">Leave</FieldLabel>
  <DateRangePicker id="leave" value={span} onValueChange={setSpan} />
</Field>

Wraps: react-day-picker, @radix-ui/react-popover

Props

Prop

Type

Pick a date from a popover

Button that opens a calendar in a popover. `id` pairs with `FieldLabel`.

Render a route as a modal over the list

A route-driven modal (right drawer or centered dialog) that plays its exit before navigating back, with a list fallback.

On this page

At a glancePreviewInstallExampleProps