DatePicker

DatePicker defines how EnterUI handles a polished calendar-driven date picker with month navigation, including default structure, accessible states, and token-driven styling.

#Default usage

<FormField label="Release date" labelProps={{ htmlFor: "datepicker-default" }}>
  <DatePicker id="datepicker-default" />
</FormField>

#Import

import { DateInput, DatePicker, FormField } from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

DatePicker uses a button trigger that opens a custom calendar popover. The trigger surfaces the selected date via its visible label, supports keyboard activation, and accepts aria-label, aria-labelledby, and aria-describedby. Each calendar day renders as a button with a full date label for screen readers. Pair with Label or FormField for a labeled context.

#API

• value / defaultValue: ISO date string (YYYY-MM-DD).
• onValueChange(value): fires when the user selects or clears a date.
• min / max: ISO date bounds.
• invalid sets aria-invalid and applies the error border / focus ring.
• size: sm, md (default), or lg.
• weekStartsOn: 0 (Sunday) or 1 (Monday, default).
• locale: BCP 47 locale string for month, weekday, and date labels.
• name: when set, renders a hidden input for form submission.
• DateInput is exported as an alias.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.