Data Entryduskmoonimplemented8 demos

DatePicker

DatePicker captures single dates and related date-picker states with typed callbacks.

Import@duskmoon-dev/components/date-picker

11API sections

32documented props

6behavior scenarios

Key API

valuedefaultValueonChangeonBluronFocusonOpenChange

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

DatePicker is most often configured through `value`, `defaultValue`, `onChange`, `onBlur`.

Covered behavior

Renders picker input with value, size, status, and classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DatePicker from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DatePicker } from "@duskmoon-dev/components/date-picker";

export function Example() {
  return (<DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>);
}

Preview

Renders picker input with value, size, status, and classes

test-backed

DatePicker scenario from the component test coverage: renders picker input with value, size, status, and classes.

Source

import "@duskmoon-dev/components/styles.css";
import { DatePicker } from "@duskmoon-dev/components/date-picker";

export function DatePickerRendersPickerInputWithDemo() {
  return (<DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>);
}

Preview

Supports uncontrolled changes and clear

test-backed

DatePicker scenario from the component test coverage: supports uncontrolled changes and clear.

Source

import "@duskmoon-dev/components/styles.css";
import { DatePicker } from "@duskmoon-dev/components/date-picker";

export function DatePickerSupportsUncontrolledChangesAndDemo() {
  return (<DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>);
}

Preview

Supports presets and showNow

test-backed

DatePicker scenario from the component test coverage: supports presets and shownow.

Source

import "@duskmoon-dev/components/styles.css";
import { DatePicker } from "@duskmoon-dev/components/date-picker";

export function DatePickerSupportsPresetsAndShowNowDemo() {
  return (<DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>);
}

Preview

Blocks disabledDate values

test-backed

DatePicker scenario from the component test coverage: blocks disableddate values.

Source

import "@duskmoon-dev/components/styles.css";
import { DatePicker } from "@duskmoon-dev/components/date-picker";

export function DatePickerBlocksDisabledDateValuesDemo() {
  return (<DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>);
}

Preview

Supports range picker values

test-backed

DatePicker scenario from the component test coverage: supports range picker values.

Source

import "@duskmoon-dev/components/styles.css";
import { DatePicker } from "@duskmoon-dev/components/date-picker";

export function DatePickerSupportsRangePickerValuesDemo() {
  return (<DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>);
}

Preview

Exposes static picker aliases

test-backed

DatePicker scenario from the component test coverage: exposes static picker aliases.

Source

import "@duskmoon-dev/components/styles.css";
import { DatePicker } from "@duskmoon-dev/components/date-picker";

export function DatePickerExposesStaticPickerAliasesDemo() {
  return (<DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>
</div>

<div data-theme="moonlight">
  <DatePicker
  defaultValue="2026-05-25"
  size="lg"
  status="success"
  onChange={(value) => console.log(value)}
/>
</div>

API

The API reference below lists every parsed exported type or interface for DatePicker. Start with `value`, `defaultValue`, `onChange`, `onBlur` for common usage.

Types: packages/components/src/components/date-picker/DatePicker.types.tsScenarios: packages/components/src/components/date-picker/DatePicker.test.tsx

DatePickerPropsinterface extends Omit< ComponentProps<"div">, "children" | "defaultValue" | "onBlur" | "onChange" | "onFocus" >

Prop	Type	Required	Description
`value`	`DatePickerValue`	No	value configures DatePicker.
`defaultValue`	`DatePickerValue`	No	defaultValue configures DatePicker.
`onChange`	`(value: DatePickerValue \| undefined, dateString: string) => void`	No	onChange configures DatePicker.
`onBlur`	`(event: DatePickerInputFocusEvent) => void`	No	onBlur configures DatePicker.
`onFocus`	`(event: DatePickerInputFocusEvent) => void`	No	onFocus configures DatePicker.
`onOpenChange`	`(open: boolean) => void`	No	onOpenChange configures DatePicker.
`picker`	`DatePickerPicker`	No	picker configures DatePicker.
`format`	`string`	No	format configures DatePicker.
`placeholder`	`string`	No	placeholder configures DatePicker.
`disabled`	`boolean`	No	disabled configures DatePicker.
`disabledDate`	`(value: DatePickerValue) => boolean`	No	disabledDate configures DatePicker.
`presets`	`DatePickerPreset[]`	No	presets configures DatePicker.
`showNow`	`boolean`	No	showNow configures DatePicker.
`allowClear`	`boolean`	No	allowClear configures DatePicker.
`open`	`boolean`	No	open configures DatePicker.
`defaultOpen`	`boolean`	No	defaultOpen configures DatePicker.
`size`	`DatePickerSize`	No	size configures DatePicker.
`status`	`DatePickerStatus`	No	status configures DatePicker.

DatePickerPresetinterface

Prop	Type	Required	Description
`label`	`ReactNode`	Yes	label configures DatePicker.
`value`	`DatePickerValue`	Yes	value configures DatePicker.

RangePickerPropsinterface extends Omit< DatePickerProps, "placeholder" | "value" | "defaultValue" | "onChange" >

Prop	Type	Required	Description
`value`	`DatePickerRangeValue`	No	value configures DatePicker.
`defaultValue`	`DatePickerRangeValue`	No	defaultValue configures DatePicker.
`onChange`	`(`	No	onChange configures DatePicker.
`value`	`DatePickerRangeValue,`	Yes	value configures DatePicker.
`dateStrings`	`[string, string],`	Yes	dateStrings configures DatePicker.
`placeholder`	`[string, string]`	No	placeholder configures DatePicker.
`separator`	`ReactNode`	No	separator configures DatePicker.

DatePickerComponentinterface extends ForwardRefExoticComponent< DatePickerProps & RefAttributes<HTMLDivElement> >

Prop	Type	Required	Description
`RangePicker`	`ForwardRefExoticComponent<`	Yes	RangePicker configures DatePicker.
`WeekPicker`	`ForwardRefExoticComponent<`	Yes	WeekPicker configures DatePicker.
`MonthPicker`	`ForwardRefExoticComponent<`	Yes	MonthPicker configures DatePicker.
`QuarterPicker`	`ForwardRefExoticComponent<`	Yes	QuarterPicker configures DatePicker.
`YearPicker`	`ForwardRefExoticComponent<`	Yes	YearPicker configures DatePicker.

DatePickerValuetype

string

DatePickerRangeValuetype

[ DatePickerValue | undefined, DatePickerValue | undefined, ]

DatePickerPickertype

"date" | "week" | "month" | "quarter" | "year" | "time"

DatePickerSizetype

"sm" | "md" | "lg"

DatePickerStatustype

"error" | "success"

DatePickerInputChangeEventtype

ChangeEvent<HTMLInputElement>

DatePickerInputFocusEventtype

FocusEvent<HTMLInputElement>