DatePicker

since v8.3.0

Styled, accessible, locale-aware date picker (single + range) wrapping

react-aria for behavior and @internationalized/date for timezone-safe value

math. See {@link DatePickerProps}.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { DatePicker } from '@hey-mike/tungsten';

import { DatePicker } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/date-picker/page.tsx

'use client';

import { DatePicker } from '@hey-mike/tungsten';
import { parseDate } from '@internationalized/date';
import { VariantGrid } from '../_components/VariantGrid';

export default function DatePickerSnapshot() {
  return (
    <VariantGrid
      title="DatePicker"
      variants={[
        {
          label: 'empty',
          node: (
            <div className="w-64">
              <DatePicker label="Date" placeholder="Pick a day" />
            </div>
          ),
        },
        {
          label: 'single (selected)',
          node: (
            <div className="w-64">
              <DatePicker label="Date" defaultValue={parseDate('2026-05-15')} />
            </div>
          ),
        },
        {
          label: 'range (selected)',
          node: (
            <div className="w-72">
              <DatePicker
                mode="range"
                label="Trip"
                defaultValue={{ start: parseDate('2026-05-10'), end: parseDate('2026-05-15') }}
              />
            </div>
          ),
        },
        {
          label: 'disabled',
          node: (
            <div className="w-64">
              <DatePicker label="Date" value={parseDate('2026-05-15')} isDisabled />
            </div>
          ),
        },
      ]}
    />
  );
}

'use client';

import { DatePicker } from '@hey-mike/tungsten';
import { parseDate } from '@internationalized/date';
import { VariantGrid } from '../_components/VariantGrid';

export default function DatePickerSnapshot() {
  return (
    <VariantGrid
      title="DatePicker"
      variants={[
        {
          label: 'empty',
          node: (
            <div className="w-64">
              <DatePicker label="Date" placeholder="Pick a day" />
            </div>
          ),
        },
        {
          label: 'single (selected)',
          node: (
            <div className="w-64">
              <DatePicker label="Date" defaultValue={parseDate('2026-05-15')} />
            </div>
          ),
        },
        {
          label: 'range (selected)',
          node: (
            <div className="w-72">
              <DatePicker
                mode="range"
                label="Trip"
                defaultValue={{ start: parseDate('2026-05-10'), end: parseDate('2026-05-15') }}
              />
            </div>
          ),
        },
        {
          label: 'disabled',
          node: (
            <div className="w-64">
              <DatePicker label="Date" value={parseDate('2026-05-15')} isDisabled />
            </div>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <DatePicker />.

Prop	Type	Default	Description
mode	`"single" \| "range"`	—	—
value	`CalendarDate \| DateRange \| null`	—	Controlled selected date. Pair with `onChange`. Controlled selected range. Pair with `onChange`.
defaultValue	`CalendarDate \| DateRange \| null`	—	Uncontrolled initial date. Uncontrolled initial range.
onChange	`((value: CalendarDate \| null) => void) \| ((value: DateRange \| null) => void)`	—	Fires when the user selects (or clears) a date. Fires when the user commits a range.
minValue	`CalendarDate`	—	Earliest selectable date — earlier days are disabled.
maxValue	`CalendarDate`	—	Latest selectable date — later days are disabled.
isDisabled	`boolean`	—	Disable the whole control.
isRequired	`boolean`	—	Mark the field required (also read from `FieldContext`).
label	`string`	—	Accessible name for the trigger when not inside a `FormField`.
placeholder	`string`	—	Visible text shown in the trigger when no date is selected.
name	`string`	—	Name for native form participation. Single: hidden ISO input. Range: `<name>-start` / `<name>-end`.
className	`string`	—	Class applied to the trigger button.
aria-label	`string`	—	Accessible name fallback (use `label` for the documented path).

Used in recipes

Compositions from the /recipes reference that use this component.

Sub-components

Composition slots re-exported from the same module.

CalendarDate

No library-specific props. Pass through standard HTML attributes for the underlying element.