> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/date-time-picker.html
> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.
# DateTimePicker
Select a specific date and time.
## Date and time
Appointment
12-hour appointment
Bounded time
basic.tsx
Copy code
```tsx lineNumbers file="../../../src/examples/en/date-time-picker/basic.tsx"
import { DateTimePicker, Form, FormField } from '@ifhover/leaf-ui';
export function DateTimePickerBasic() {
return (
);
}
```
Expand code
## Formats and business hours
Business hours, custom format and preset
capabilities.tsx
Copy code
```tsx lineNumbers file="../../../src/examples/date-time-picker/capabilities.tsx"
import { DateTimePicker, Space, Text } from '@ifhover/leaf-ui';
export function Capabilities() {
return (
{'Business hours, custom format and preset'}
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;
},
},
]}
/>
);
}
```
Expand code
## 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`](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/time-picker.md#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`](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/date-picker.md#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` | — | Input element reference |
## Types
Import types when defining reusable component props or assembling options.
```ts
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.