Date picker

Single-date calendar popover with keyboard-friendly grid.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Default

With min date

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { DatePicker } from "@payglocal_ui/flux-ui";

Example

const [value, setValue] = useState("");

<DatePicker value={value} onChange={setValue} placeholder="Pick a date" />

// Bound it. Days outside min/max are struck out and cannot be clicked, so
// an out-of-range date is refused BEFORE the click rather than rejected
// afterwards — a feature once hand-rolled a whole date chip to enforce an
// upper bound on Apply, which is the version of this that reads as a bug.
<DatePicker value={to} onChange={setTo} min={from} max={today} />