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 の更新、または公開用成果物の作成を依頼してください。