Leaf UI
  • English

      • DateTimePicker

      Select a specific date and time.

      Date and time

      Live previewDate and time
      basic.tsx
      import { DateTimePicker } from '@sudden3/leaf-ui';
export function DateTimePickerBasic() {
  return (
    <div className="leaf-demo-stack">
      <DateTimePicker aria-label="Appointment" defaultValue={new Date(2026, 9, 3, 14, 30)} />
      <DateTimePicker aria-label="12-hour appointment" use12Hours minuteStep={15} secondStep={10} />
      <DateTimePicker
        aria-label="Bounded time"
        minDate={new Date(2026, 9, 1)}
        maxDate={new Date(2026, 9, 31, 23, 59, 59)}
        placeholder="Select a time in October"
      />
    </div>
  );
}

      DateTimePicker API

      PropertyTypeDefaultDescription
      value / defaultValueDate | nullnullControlled / initial value
      onChange(value: Date | null, dateString: string) => void—Confirms a Date and local date-time string; clearing returns null
      minDate / maxDateDate—Bounds, including the time
      showSecondsbooleantrueShow seconds; when disabled seconds are zero
      use12HoursbooleanfalseDisplay a 12-hour clock with AM/PM options
      minuteStep / secondStepnumber1Minute / second step, an integer from 1 to 60
      showTodaybooleantrueShow the Today shortcut
      todayTextReactNodeLocale defaultCustomize the Today label
      renderExtraFooterReactNode—Additional footer content
      allowClearbooleantrueShow the clear button
      size'sm' | 'md' | 'lg''md'Control size
      status'error' | 'warning'—Validation appearance
      disabled / requiredbooleanfalseDisabled / required; inherited from FormField
      placeholder / name / formstring—Placeholder / field name / form ID
      onOpenChange(open: boolean) => void—Called when the panel opens or closes
      refRef<HTMLInputElement>—Input element reference

      Types

      Import types when defining reusable component props or assembling options.

      import type { DateTimePickerProps } from '@sudden3/leaf-ui';

      Usage notes

      Click the top-right time button to switch between calendar and time panels. Today changes the draft date; Now sets the current date and time. Customize shortcuts with showToday, todayText and renderExtraFooter.

      Type YYYY-MM-DD HH:mm:ss (or YYYY-MM-DD HH:mm without seconds), then press Enter or click OK. Time input accepts 24-hour time, AM/PM and 上午/下午. Escape or clicking outside discards the draft. Invalid and out-of-bounds text is rejected.

      Dates use the local timezone. The value and FormData use 24-hour time regardless of use12Hours. Other input attributes and aria-* target the input; className/style target the wrapper. Uncontrolled fields follow form reset.