DateTimePicker

Select a specific date and time.

Date and time

basic.tsx

import { DateTimePicker, Form, FormField } from '@ifhover/leaf-ui';

export function DateTimePickerBasic() {
  return (
    <Form layout="vertical">
      <FormField label="Appointment">
        <DateTimePicker aria-label="Appointment" defaultValue={new Date(2026, 9, 3, 14, 30)} />
      </FormField>
      <FormField label="12-hour appointment">
        <DateTimePicker
          aria-label="12-hour appointment"
          use12Hours
          minuteStep={15}
          secondStep={10}
        />
      </FormField>
      <FormField label="Bounded time">
        <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"
        />
      </FormField>
    </Form>
  );
}

Formats and business hours

Business hours, custom format and preset

capabilities.tsx

import { DateTimePicker, Space, Text } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Text>
        {'Business hours, custom format and preset'}
      </Text>
      <DateTimePicker
        format="DD/MM/YYYY HH:mm"
        showSeconds={false}
        disabledDate={(date) => date.getDay() === 0}
        disabledTime={(date) => date.hour < 9 || date.hour > 18}
        presets={[
          {
            label: 'Tomorrow at 10',
            value: () => {
              const date = new Date();
              date.setDate(date.getDate() + 1);
              date.setHours(10, 0, 0, 0);
              return date;
            },
          },
        ]}
      />
    </Space>
  );
}

Serialization and dates

format changes display text and the string argument of onChange; FormData keeps the canonical period/date representation described below. Square brackets escape literal text, such as YYYY-[Q]Q. Provide parse with a function-valued formatter. Dates are local calendar values; convert business timezones explicitly at the application boundary. Configure the first weekday with ConfigProvider's weekStartsOn.

DateTimePicker API

Property	Type	Default	Description
`popupPlacement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'`	—	Placement relative to the trigger.
`popupClassName`	`string`	—	Custom class for the popup.
`popupStyle`	`CSSProperties`	—	Custom popup styles.
`popupRender`	`(content: React.ReactNode) => React.ReactNode`	—	Wrap or extend popup content; retain the supplied content to preserve interaction.
`getPopupContainer`	`() => Element \| DocumentFragment`	—	Return a popup container, including a ShadowRoot.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size
`status`	`'error' \| 'warning'`	—	Validation appearance
`allowClear`	`boolean`	`true`	Show the clear button
`inputReadOnly`	`boolean`	—	Disable typing while retaining panel selection.
`open`	`boolean`	—	Control whether the panel is open.
`defaultOpen`	`boolean`	—	Initial open state.
`value`	`Date \| null`	`null`	Controlled / initial value
`defaultValue`	`Date \| null`	`null`	Controlled / initial value
`minDate`	`Date`	—	Bounds, including the time
`maxDate`	`Date`	—	Bounds, including the time
`use12Hours`	`boolean`	`false`	Display a 12-hour clock with AM/PM options
`showSeconds`	`boolean`	`true`	Show seconds; when disabled seconds are zero
`minuteStep`	`number`	`1`	Minute / second step, an integer from 1 to 60
`secondStep`	`number`	`1`	Minute / second step, an integer from 1 to 60
`showToday`	`boolean`	`true`	Show the Today shortcut
`todayText`	`ReactNode`	Locale default	Customize the Today label
`renderExtraFooter`	`ReactNode`	—	Additional footer content
`onChange`	`(value: Date \| null, dateString: string) => void`	—	Confirms a Date and local date-time string; clearing returns null
`onOpenChange`	`(open: boolean) => void`	—	Called when the panel opens or closes
`disabledDate`	`(date: Date) => boolean`	—	Disable dates using business rules.
`disabledTime`	`(parts: TimeParts, date: Date) => boolean`	—	Disable times; typing and panel selection use the same rules.
`format`	`string \| ((date: Date) => string)`	—	Display format; dates support YYYY, MM, DD, HH, mm, ss and Q.
`parse`	`(text: string) => Date \| null`	—	Parse entered text; return null on failure.
`presets`	`readonly DatePreset[]`	—	Presets; value may be computed on demand.
`panelValue`	`Date`	—	Controlled date displayed by the calendar panel.
`onPanelChange`	`(date: Date) => void`	—	Called when the displayed calendar period changes.
`cellRender`	`(date: Date) => ReactNode`	—	Customize calendar cell content.
`disabled`	`boolean`	`false`	Disable interaction.
`required`	`boolean`	`false`	Require a non-empty value; compound controls validate once.
`name`	`string`	—	Field name in native FormData.
`form`	`string`	—	ID of the associated native form.
`ref`	`Ref<HTMLInputElement>`	—	Input element reference

Types

Import types when defining reusable component props or assembling options.

import type { DateTimePickerProps } from '@ifhover/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.

#DateTimePicker

#Date and time

#Formats and business hours

#Serialization and dates

#DateTimePicker API

#Types