DatePicker

Choose a date from a calendar.

Examples

Values are Date objects in local time. onChange also supplies a YYYY-MM-DD string. Named fields submit this string. Arrow keys move days, Home / End move within a week, and PageUp / PageDown move months. Use DateTimePicker for time, or DateRangePicker for a range.

Live previewBasic selection

basic.tsx

import { DatePicker } from '@sudden3/leaf-ui';

export function DatePickerBasic() {
  return (
    <div className="leaf-demo-stack">
      <DatePicker aria-label="Choose a date" placeholder="Pick a good day" />
      <DatePicker aria-label="Default date" defaultValue={new Date(2026, 9, 15)} />
      <DatePicker aria-label="Disabled date" defaultValue={new Date(2026, 9, 15)} disabled />
    </div>
  );
}

Live previewInteractive example

October 5–25 are available. Current:2026-10-15

controlled.tsx

import { DatePicker } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function DatePickerControlled() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 9, 15));
  const [dateString, setDateString] = useState('2026-10-15');
  return (
    <div className="leaf-demo-stack">
      <DatePicker
        aria-label="Date in October"
        value={date}
        minDate={new Date(2026, 9, 5)}
        maxDate={new Date(2026, 9, 25)}
        onChange={(next, text) => {
          setDate(next);
          setDateString(text);
        }}
      />
      <span className="leaf-demo-note">
        October 5–25 are available. Current:{dateString || 'Not selected'}
      </span>
      <DatePicker aria-label="Required date" status="error" required placeholder="Set a deadline" />
    </div>
  );
}

Date shortcuts

Customize Today with todayText, add shortcuts with renderExtraFooter, or hide Today with showToday=false.

Live previewDate shortcuts

footer.tsx

import { Button, DatePicker } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function DatePickerFooter() {
  const [value, setValue] = useState<Date | null>(null);
  const tomorrow = () => {
    const next = new Date();
    next.setDate(next.getDate() + 1);
    next.setHours(0, 0, 0, 0);
    setValue(next);
  };
  return (
    <DatePicker
      aria-label="Custom date shortcuts"
      value={value}
      onChange={setValue}
      todayText="Today"
      renderExtraFooter={
        <Button variant="ghost" size="sm" onClick={tomorrow}>
          Tomorrow
        </Button>
      }
    />
  );
}

DatePicker API

Property	Type	Default	Description
`value` / `defaultValue`	`Date \| null`	`null`	Controlled date / initial uncontrolled date
`onChange`	`(date: Date \| null, dateString: string) => void`	—	Changed date; clearing returns null and an empty string
`minDate` / `maxDate`	`Date`	—	Earliest / latest date, compared in local time
`showToday`	`boolean`	`true`	Show the Today shortcut
`todayText`	`ReactNode`	Locale default	Customize the Today label
`renderExtraFooter`	`ReactNode`	—	Additional footer content
`allowClear`	`boolean`	`true`	Show a clear button
`placeholder`	`string`	Locale default	Placeholder when empty; localized by ConfigProvider
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size
`status`	`'error' \| 'warning'`	—	Validation appearance
`disabled`	`boolean`	`false`	Disable the control and its panel
`name` / `form`	`string`	—	Field name / associated form ID
`required`	`boolean`	`false`	Require a date
`onOpenChange`	`(open: boolean) => void`	—	Calendar open-state changes
`ref`	`Ref<HTMLInputElement>`	—	DOM reference

Types

Import DatePickerProps to describe component props. Option types in the API table link to their detailed fields above.

import type { DatePickerProps } from '@sudden3/leaf-ui';

Forms and localization

Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in FormField for labels, help and errors. ConfigProvider supplies regional themes and translated built-in UI. Application labels and options are your responsibility.

Type YYYY-MM-DD and press Enter or move focus away to submit. Invalid dates and values outside minDate/maxDate are rejected. Click the month or year heading to switch panels. Today selects the current date. Use showToday, todayText and renderExtraFooter to customize shortcuts.

Clicking the field keeps typing focus; ArrowDown moves into the calendar, and Escape discards pending text. Other input attributes and aria-* target the input; className/style target the wrapper.

#DatePicker

#Examples

#Date shortcuts

#DatePicker API