syncfusion-react-datetimepicker

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

DateTimePicker (implementing-datetimepicker)

Component Overview

组件概述

The Syncfusion

DateTimePickerComponent

provides a combined calendar and time picker with extensive configurability: min/max dates, time steps, masked input, localization, strict validation, RTL, and accessible keyboard navigation.

Syncfusion

DateTimePickerComponent

提供了结合日历和时间选择器的功能，支持高度可配置性：最小/最大日期、时间步长、掩码输入、本地化、严格校验、RTL 以及无障碍键盘导航。

Documentation (read these references in order)

文档（请按顺序阅读以下参考资料）

📄 Read: references/getting-started.md — installation, module setup, CSS imports, basic usage
📄 Read: references/api-reference.md — full properties, methods, and events
📄 Read: references/date-time-selection.md — selection patterns and constraints
📄 Read: references/time-configuration.md — step, minTime/maxTime, scroll behavior
📄 Read: references/events-and-methods.md — event handlers and method usage
📄 Read: references/styling-and-customization.md — themes and cssClass usage
📄 Read: references/advanced-features.md — masked input, strict mode, calendar modes, timezone handling
📄 Read: references/accessibility.md — keyboard and ARIA guidance

📄 阅读：references/getting-started.md — 安装、模块配置、CSS 导入、基础用法
📄 阅读：references/api-reference.md — 完整属性、方法和事件说明
📄 阅读：references/date-time-selection.md — 选择模式和约束规则
📄 阅读：references/time-configuration.md — 步长、minTime/maxTime、滚动行为
📄 阅读：references/events-and-methods.md — 事件处理和方法使用
📄 阅读：references/styling-and-customization.md — 主题和 cssClass 用法
📄 阅读：references/advanced-features.md — 掩码输入、严格模式、日历模式、时区处理
📄 阅读：references/accessibility.md — 键盘和 ARIA 规范指南

Quick Start (React + TypeScript)

快速上手（React + TypeScript）

Install package:

bash

npm install @syncfusion/ej2-react-calendars

Import styles (in
```
index.css
```
or component CSS):

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';

Minimal functional example (
```
App.tsx
```
):

tsx

import React, { useState } from 'react';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';

export default function App() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <div style={{ padding: 20 }}>
      <h3>Choose date and time</h3>
      <DateTimePickerComponent
        value={value}
        change={(e) => setValue((e as any).value)}
        format="dd/MM/yyyy hh:mm a"
        step={15}
        placeholder="Select date and time"
      />
      <p>Selected: {value ? value.toString() : 'none'}</p>
    </div>
  );
}

安装依赖包：

bash

npm install @syncfusion/ej2-react-calendars

引入样式（在
```
index.css
```
或组件 CSS 中添加）：

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';

最小可运行示例（
```
App.tsx
```
）：

tsx

import React, { useState } from 'react';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';

export default function App() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <div style={{ padding: 20 }}>
      <h3>Choose date and time</h3>
      <DateTimePickerComponent
        value={value}
        change={(e) => setValue((e as any).value)}
        format="dd/MM/yyyy hh:mm a"
        step={15}
        placeholder="Select date and time"
      />
      <p>Selected: {value ? value.toString() : 'none'}</p>
    </div>
  );
}

Common Patterns

常见使用模式

Controlled value: bind
```
value
```
and update on
```
change
```
.
Range enforcement: use
```
min
```
and
```
max
```
for dates,
```
minTime
```
/
```
maxTime
```
for times.
Masked input: enable with
```
enableMask
```
and provide
```
maskPlaceholder
```
.
Localization: set
```
locale
```
or use global culture settings.
Keyboard-first: provide
```
keyConfigs
```
for custom shortcuts.

受控值：绑定
```
value
```
并在
```
change
```
事件中更新
范围限制：使用
```
min
```
和
```
max
```
限制日期范围，
```
minTime
```
/
```
maxTime
```
限制时间范围
掩码输入：通过
```
enableMask
```
开启并配置
```
maskPlaceholder
```
本地化：设置
```
locale
```
或使用全局文化配置
键盘优先：配置
```
keyConfigs
```
自定义快捷键

Key Props Summary (see API reference for full list)

核心属性汇总（完整列表请参考 API 文档）

value

min

max

step

format

enableMask

placeholder

cssClass

locale

readonly

enabled

value

min

max

step

format

enableMask

placeholder

cssClass

locale

readonly

enabled

Key Events

核心事件

change

open

close

created

destroyed

navigated

blur

focus

renderDayCell

change

open

close

created

destroyed

navigated

blur

focus

renderDayCell

Next steps

后续步骤

All reference files have been created and validated against the official Syncfusion API (see
```
references/api-reference.md
```
).
Next: run the test-case guide and validation checks, then create automated examples or add platform-specific notes on request.
Ask me to run tests, update
```
completion-status.json
```
, or produce publish-ready artifacts.

所有参考文件均已基于 Syncfusion 官方 API 创建并验证（参见
```
references/api-reference.md
```
）
下一步：运行测试用例指南和校验检查，按需创建自动化示例或添加平台专属说明
可以要求我运行测试、更新
```
completion-status.json
```
或生成可发布的产物。