Pick a date from a popover

At a glanceCopy Anchor Link

• Who: Developers collecting one day in a form field.
• What: Button that opens a calendar in a popover. id pairs with FieldLabel.
• Use when: For a due date, a start date, or any single day in a form.
• Avoid when: For a range — use the start-and-end picker. For a calendar that stays on the page — use Calendar.
• See also: Lay out fieldsets, fields, and error lists, Pick a start and end date, Float extra content next to a control

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.6.4 (via changesets).

ExampleCopy Anchor Link

import { DatePicker, Field, FieldLabel } from "@zedtech/zedkit-ui";
const [due, setDue] = useState<Date | undefined>();
<Field>
  <FieldLabel htmlFor="due">Due date</FieldLabel>
  <DatePicker id="due" value={due} onValueChange={setDue} />
</Field>

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

PropsCopy Anchor Link