Components

Date picker

Date field on Calendar and Popover: a ruled trigger opens a square, flat calendar; Esc returns focus to the trigger.

Publication date

Install

bash

npx shadcn add @eloquent/date-picker

This also installs @eloquent/calendar, @eloquent/popover and @eloquent/button.

Usage

tsx

import * as React from "react";
import { enGB } from "react-day-picker/locale";
import { DatePicker } from "@/components/ui/date-picker";

const [date, setDate] = React.useState<Date | undefined>();

<DatePicker
  aria-labelledby="date-label date-trigger"
  id="date-trigger"
  value={date}
  onValueChange={setDate}
  placeholder="Pick a date"
  popupLabel="Choose a publication date"
  calendarProps={{ locale: enGB }}
/>

All text comes from props: placeholder, popupLabel, and calendarProps.locale and labels for the calendar. Name the trigger with aria-labelledby pointing at the visible label and the trigger itself, so a screen reader hears both the label and the chosen date.

States

Empty: placeholder text.

Chosen: the date in the locale.

Disabled: grey text and rule, not allowed.

Weekends disabled in the calendar.

State	Treatment
Empty	Placeholder in `muted-foreground`
Chosen	The date in the locale
Open	Square popup, 1px ink rule, no shadow
Focus	2px ink outline, 2px offset
Disabled	`halftone` text and rule, `cursor-not-allowed`

Keyboard

Key	Action
Tab	Focuses the trigger
Enter / Space	Opens the calendar; focus lands on the chosen day, else today
Arrow keys, Home, End, Page Up, Page Down	Move through the calendar (see Calendar)
Enter / Space on a day	Chooses it, closes the popup and returns focus to the trigger
Esc	Closes the popup and returns focus to the trigger

Vietnamese

Ngày đăng

Ink adaptation

Upstream's muted placeholder, rounded popover and shadow become an outline button and a flat 1px ink popup with a square calendar inside. The popup has no arrow and no hover effect on its days.