Skip to contentWolf-Rayet

Date time picker

A date time picker allows the user to select an associated date and time.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react
import '@wolf-rayet/react/css/wolf-rayet.css';
import { DateTimePicker } from '@wolf-rayet/react';

Props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
label *string—Names what the moment is for. Required, because a date on its own does not say what it marks.
onChange(value: string) => void—Called with the chosen value when it changes.

Accessibility

What the component does for you, and what it needs from you.

  • The native control brings the platform behaviour and the reader’s own locale, which no custom picker matches.
  • The label is required by the component, because a moment with no name is meaningless.
  • If a timezone applies, it has to be in text. It cannot be inferred from the control.