DatePicker

DatePicker is a Fluent-style input that opens a Calendar in a popover to pick a date, shown as dd/MM/yyyy.

The trigger shares Input's border style (accessible bottom border, brand bar on focus), with a calendar icon on the right and an optional clear button (clearable). Put it in a <Field> for a label, hint and error message. DateRangePicker picks a date range and shows two months side by side.

Start date

Leave it empty if the date isn't set yet.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { DatePicker, DateRangePicker, Field } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Delivery date*

Pick a delivery date (today or later).

Date limits & validation

minDate disables the days before today; Field shows the error / success message.

Time off

Date range

DateRangePicker: the popover closes once both the start and end dates are picked.

Size & disabled

small 24px, medium 32px, large 40px.

Usage

Always provide a label (Field label or aria-label) and a format hint when needed.
Use minDate / maxDate to block invalid dates.
Turn on clearable for optional fields.

Don't

Don't use DatePicker for dates far from today (birth dates) without a quick way to jump between years.
Don't format dates differently from one screen to another. Keep dd/MM/yyyy.

Props

Prop · Type	Default	Description
value / defaultValueDate \| null	Default: —	Selected date (controlled / uncontrolled).
onValueChange(date: Date \| null) => void	Default: —	Called when a date is picked or cleared (null). The old name onSelectDate is deprecated (removed in 1.0).
placeholderstring	Default: "Select a date…"	Text shown when the field is empty.
clearableboolean	Default: false	Shows a clear button when there is a value.
minDate / maxDateDate	Default: —	Range of dates that can be picked.
formatDate(date: Date) => string	Default: dd/MM/yyyy	Display format.
size"small" \| "medium" \| "large"	Default: "medium"	Height 24 / 32 / 40px.
disabled / required / id / aria-*—	Default: —	Passed automatically by Field when wrapped in <Field>.
DateRangePicker.value / onValueChangeDateRange \| null / (range: DateRange \| null) => void	Default: —	Range { from, to }; numberOfMonths defaults to 2. The old name onSelectRange is deprecated (removed in 1.0).

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.datePicker

Key · Type	Default (English)	messagesVi
placeholderstring Placeholder khi chưa chọn ngày.	Default (English)`"Select a date…"`	messagesVi`"Chọn ngày…"`
clearstring aria-label nút xoá giá trị (`clearable`).	Default (English)`"Clear"`	messagesVi`"Xoá giá trị"`