syncfusion-react-datetimepicker

DateTimePicker（implementing-datetimepicker）

组件概述

Syncfusion DateTimePickerComponent 提供日历和时间选择器的组合控件，支持丰富的配置选项：日期最小值/最大值、时间步长、带掩码的输入、本地化、严格验证、RTL 以及无障碍键盘导航。

文档（按顺序阅读这些参考资料）

• 📄 阅读：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 指南

快速开始（React + TypeScript）

1. 安装软件包：

npm install @syncfusion/ej2-react-calendars

2. 导入样式（在 index.css 或组件 CSS 中）：

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

3. 最小可运行示例（App.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>
  );
}

常见模式

• 受控值：绑定 value 并在 change 时更新。
• 范围限制：使用 min 和 max 限制日期，使用 minTime/maxTime 限制时间。
• 带掩码的输入：启用 enableMask 并提供 maskPlaceholder。
• 本地化：设置 locale 或使用全局区域设置。
• 键盘优先：使用 keyConfigs 提供自定义快捷键。

关键属性摘要（完整列表请参阅 API 参考）

• value、min、max、step、format、enableMask、placeholder、cssClass、locale、readonly、enabled。

关键事件

• change、open、close、created、destroyed、navigated、blur、focus、renderDayCell。

后续步骤

• 所有参考文件均已创建，并已依据官方 Syncfusion API 完成验证（参见 references/api-reference.md）。
• 下一步：运行测试用例指南和验证检查，然后创建自动化示例，或根据请求添加特定平台的说明。
• 请让我运行测试、更新 completion-status.json，或生成可供发布的文件。