Data Entryduskmoonimplemented8 demos

TimePicker

TimePicker captures time values with typed parsing and status state.

Import@duskmoon-dev/components/time-picker

9API sections

28documented props

6behavior scenarios

Key API

valuedefaultValueformatdisableddisabledTimeuse12Hours

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

TimePicker is most often configured through `value`, `defaultValue`, `format`, `disabled`.

Covered behavior

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

Source

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

export function Example() {
  return (<TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>);
}

Preview

Renders value with format, size, status, and classes

test-backed

TimePicker scenario from the component test coverage: renders value with format, size, status, and classes.

Source

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

export function TimePickerRendersValueWithFormatDemo() {
  return (<TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>);
}

Preview

Supports uncontrolled changes and clear

test-backed

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

Source

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

export function TimePickerSupportsUncontrolledChangesAndDemo() {
  return (<TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>);
}

Preview

Supports showNow while open

test-backed

TimePicker scenario from the component test coverage: supports shownow while open.

Source

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

export function TimePickerSupportsShowNowWhileOpenDemo() {
  return (<TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>);
}

Preview

Supports 12-hour display values

test-backed

TimePicker scenario from the component test coverage: supports 12-hour display values.

Source

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

export function TimePickerSupports12HourDisplayDemo() {
  return (<TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>);
}

Preview

Blocks disabled time values

test-backed

TimePicker scenario from the component test coverage: blocks disabled time values.

Source

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

export function TimePickerBlocksDisabledTimeValuesDemo() {
  return (<TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>);
}

Preview

Supports range picker values

test-backed

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

Source

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

export function TimePickerSupportsRangePickerValuesDemo() {
  return (<TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>);
}

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">
  <TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>
</div>

<div data-theme="moonlight">
  <TimePicker
  defaultValue="09:30:00"
  format="HH:mm:ss"
  allowClear
/>
</div>

API

The API reference below lists every parsed exported type or interface for TimePicker. Start with `value`, `defaultValue`, `format`, `disabled` for common usage.

Types: packages/components/src/components/time-picker/TimePicker.types.tsScenarios: packages/components/src/components/time-picker/TimePicker.test.tsx

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

Prop	Type	Required	Description
`value`	`TimePickerValue`	No	value configures TimePicker.
`defaultValue`	`TimePickerValue`	No	defaultValue configures TimePicker.
`format`	`string`	No	format configures TimePicker.
`disabled`	`boolean`	No	disabled configures TimePicker.
`disabledTime`	`(value?: TimePickerValue) => DisabledTimeConfig`	No	disabledTime configures TimePicker.
`use12Hours`	`boolean`	No	use12Hours configures TimePicker.
`showNow`	`boolean`	No	showNow configures TimePicker.
`allowClear`	`boolean`	No	allowClear configures TimePicker.
`placeholder`	`string`	No	placeholder configures TimePicker.
`open`	`boolean`	No	open configures TimePicker.
`defaultOpen`	`boolean`	No	defaultOpen configures TimePicker.
`size`	`TimePickerSize`	No	size configures TimePicker.
`status`	`TimePickerStatus`	No	status configures TimePicker.
`onChange`	`(value: TimePickerValue \| undefined, timeString: string) => void`	No	onChange configures TimePicker.
`onOpenChange`	`(open: boolean) => void`	No	onOpenChange configures TimePicker.
`onBlur`	`(event: TimePickerInputFocusEvent) => void`	No	onBlur configures TimePicker.
`onFocus`	`(event: TimePickerInputFocusEvent) => void`	No	onFocus configures TimePicker.

DisabledTimeConfiginterface

Prop	Type	Required	Description
`disabledHours`	`() => number[]`	No	disabledHours configures TimePicker.
`disabledMinutes`	`(selectedHour: number) => number[]`	No	disabledMinutes configures TimePicker.
`disabledSeconds`	`(selectedHour: number, selectedMinute: number) => number[]`	No	disabledSeconds configures TimePicker.

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

Prop	Type	Required	Description
`value`	`TimePickerRangeValue`	No	value configures TimePicker.
`defaultValue`	`TimePickerRangeValue`	No	defaultValue configures TimePicker.
`onChange`	`(`	No	onChange configures TimePicker.
`value`	`TimePickerRangeValue,`	Yes	value configures TimePicker.
`timeStrings`	`[string, string],`	Yes	timeStrings configures TimePicker.
`placeholder`	`[string, string]`	No	placeholder configures TimePicker.
`separator`	`ReactNode`	No	separator configures TimePicker.

TimePickerComponentinterface extends ForwardRefExoticComponent< TimePickerProps & RefAttributes<HTMLDivElement> >

Prop	Type	Required	Description
`RangePicker`	`ForwardRefExoticComponent<`	Yes	RangePicker configures TimePicker.

TimePickerValuetype

string | Date

TimePickerRangeValuetype

[ TimePickerValue | undefined, TimePickerValue | undefined, ]

TimePickerSizetype

"sm" | "md" | "lg"

TimePickerStatustype

"error" | "success"

TimePickerInputFocusEventtype

FocusEvent<HTMLInputElement>