Data EntryDmduskmoonimplemented5 demos

DmDatePicker

DmDatePicker selects dates or ranges through day, week, month, quarter, and year picker variants.

Import@duskmoon-dev/components/dm-date-picker

3API sections

5documented props

3behavior scenarios

Key API

RangePickerWeekPickerMonthPickerQuarterPickerYearPicker

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

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

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmDatePicker is most often configured through `RangePicker`, `WeekPicker`, `MonthPicker`, `QuarterPicker`.

Covered behavior

Renders Dm wrapper class and default date picker

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 DmDatePicker from its package subpath, then render it with the core props.

Source

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

export function Example() {
  return (<DmDatePicker>DuskMoon Dm Date Picker</DmDatePicker>);
}

Preview

Renders Dm wrapper class and default date picker

test-backed

DmDatePicker scenario from the component test coverage: renders dm wrapper class and default date picker.

Source

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

export function DmDatePickerRendersDmWrapperClassDemo() {
  return (<DmDatePicker>DuskMoon Dm Date Picker</DmDatePicker>);
}

Preview

Supports locale setter and picker shortcuts

test-backed

DmDatePicker scenario from the component test coverage: supports locale setter and picker shortcuts.

Source

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

export function DmDatePickerSupportsLocaleSetterAndDemo() {
  return (<DmDatePicker>DuskMoon Dm Date Picker</DmDatePicker>);
}

Preview

Exposes range picker

test-backed

DmDatePicker scenario from the component test coverage: exposes range picker.

Source

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

export function DmDatePickerExposesRangePickerDemo() {
  return (<DmDatePicker>DuskMoon Dm Date Picker</DmDatePicker>);
}

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">
  <DmDatePicker>DuskMoon Dm Date Picker</DmDatePicker>
</div>

<div data-theme="moonlight">
  <DmDatePicker>DuskMoon Dm Date Picker</DmDatePicker>
</div>

API

The API reference below lists every parsed exported type or interface for DmDatePicker. Start with `RangePicker`, `WeekPicker`, `MonthPicker`, `QuarterPicker` for common usage.

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

DmDatePickerComponentinterface extends ForwardRefExoticComponent< DmDatePickerProps & RefAttributes<HTMLDivElement> >

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

DmDatePickerPropstype

DatePickerProps

DmRangePickerPropstype

RangePickerProps