syncfusion-react-timepicker

Syncfusion React TimePicker コンポーネントの実装

Syncfusion React TimePicker コンポーネントを使うと、アプリケーションで時刻を簡単に選択できます。複数の時刻形式、時刻範囲の制約、キーボード操作、フォーム連携、モバイル向けに最適化された全画面モードに対応しています。

ドキュメントのナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• npm によるインストール（@syncfusion/ej2-react-calendars）
• app.module.ts での CalendarModule の設定
• CSS のインポートとテーマの設定
• TimePicker の基本的な実装
• useRef を使ったコンポーネントの登録
• 開発サーバーの起動
• よくあるトラブルシューティング

時刻の形式と表示

📄 参照： references/time-format-and-display.md

• 形式文字列のオプション（24 時間形式、12 時間形式）
• skeleton プロパティを持つ TimeFormatObject
• ロケールに基づく時刻形式
• プレースホルダーテキストのカスタマイズ
• フローティングラベルの種類（Never、Always、Auto）
• DOM 属性用の htmlAttributes
• enableMask によるマスク入力
• マスクのプレースホルダー設定

時刻範囲と選択

📄 参照： references/time-range-and-selection.md

• 時刻の最小値と最大値の制約
• 時刻の間隔（15、30、60 分）
• ScrollTo のデフォルト位置
• 値のバインドと双方向更新
• 読み取り専用状態と無効状態
• OpenOnFocus の動作
• 時刻ポップアップリストの生成
• 時刻間隔の設定

イベントとメソッド

📄 参照： references/events-and-methods.md

• イベントハンドラー（change、open、close、blur、focus）
• イベント引数の構造
• メソッド（show、hide、focusIn、focusOut）
• useRef による命令型制御
• ライフサイクルイベント（created、destroyed）
• イベントのパターンとベストプラクティス
• 値のクリアと状態のリセット
• カスタム書式設定用の ItemRender

カスタマイズとスタイル設定

📄 参照： references/customization-and-styling.md

• cssClass による CSS クラスのカスタマイズ
• テーマのオプション（Material、Bootstrap、Fluent、Tailwind）
• モバイルデバイス向けの全画面モード
• RTL（右から左へ記述する言語）のサポート
• Strict モードの検証
• Z-index の管理
• 幅と高さの設定
• アクセシビリティ機能
• Theme Studio との連携

API リファレンス

📄 参照： references/api-reference.md

• プロパティの全一覧（26 個）
• 署名付きの全メソッド（5 個）
• イベント引数付きの全イベント（9 個）
• 型定義とインターフェイス
• デフォルト値と制約
• 各プロパティの使用例

高度なパターン

📄 参照： references/advanced-patterns.md

• 検証を伴うフォーム送信
• キーボードショートカットと keyConfigs
• サーバーのタイムゾーンオフセットの処理
• localStorage による永続化
• 複数コンポーネントの連携
• パフォーマンスの最適化
• エラー処理のパターン
• 複雑な検証シナリオ

クイックスタート

import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-calendars/styles/material3.css';

function App() {
  const [selectedTime, setSelectedTime] = React.useState(new Date('1/1/2018 9:00 AM'));

  const handleChange = (e: any) => {
    setSelectedTime(e.value);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Select Time</h2>
      <TimePickerComponent
        value={selectedTime}
        change={handleChange}
        placeholder="Select a time"
      />
      <p>Selected: {selectedTime ? selectedTime.toLocaleTimeString() : 'None'}</p>
    </div>
  );
}

export default App;

よくあるパターン

パターン 1：最小値と最大値の制約を設定した TimePicker

import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';

function AppointmentScheduler() {
  const [appointmentTime, setAppointmentTime] = React.useState(new Date('1/1/2018 9:00 AM'));

  const minTime = new Date('1/1/2018 8:00 AM');
  const maxTime = new Date('1/1/2018 5:00 PM');

  return (
    <div>
      <h3>Select Appointment Time (8 AM - 5 PM)</h3>
      <TimePickerComponent
        value={appointmentTime}
        min={minTime}
        max={maxTime}
        step={30}
        change={(e: any) => setAppointmentTime(e.value)}
        placeholder="Choose time"
      />
    </div>
  );
}

export default AppointmentScheduler;

パターン 2：TimePicker の送信機能を備えたフォーム

import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function ScheduleForm() {
  const [formData, setFormData] = React.useState({
    startTime: new Date('1/1/2018 9:00 AM'),
    endTime: new Date('1/1/2018 5:00 PM'),
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Schedule data:', {
      startTime: formData.startTime?.toLocaleTimeString(),
      endTime: formData.endTime?.toLocaleTimeString(),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Schedule Meeting</h3>
      
      <label>Start Time:</label>
      <TimePickerComponent
        value={formData.startTime}
        change={(e: any) => setFormData(prev => ({ ...prev, startTime: e.value }))}
      />

      <label style={{ marginTop: '10px' }}>End Time:</label>
      <TimePickerComponent
        value={formData.endTime}
        min={formData.startTime}
        change={(e: any) => setFormData(prev => ({ ...prev, endTime: e.value }))}
      />

      <ButtonComponent type="submit" isPrimary={true} style={{ marginTop: '15px' }}>
        Schedule
      </ButtonComponent>
    </form>
  );
}

export default ScheduleForm;

パターン 3：カスタム形式の TimePicker

import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';

function TimeFormatDemo() {
  const [time12hr, setTime12hr] = React.useState(new Date('1/1/2018 2:30 PM'));
  const [time24hr, setTime24hr] = React.useState(new Date('1/1/2018 14:30'));

  return (
    <div style={{ padding: '20px' }}>
      <div>
        <h4>12-Hour Format (hh:mm a)</h4>
        <TimePickerComponent
          value={time12hr}
          format="hh:mm a"
          change={(e: any) => setTime12hr(e.value)}
        />
        <p>Value: {time12hr?.toLocaleTimeString('en-US', { hour12: true })}</p>
      </div>

      <div style={{ marginTop: '20px' }}>
        <h4>24-Hour Format (HH:mm)</h4>
        <TimePickerComponent
          value={time24hr}
          format="HH:mm"
          change={(e: any) => setTime24hr(e.value)}
        />
        <p>Value: {time24hr?.toLocaleTimeString('en-US', { hour12: false })}</p>
      </div>
    </div>
  );
}

export default TimeFormatDemo;

パターン 4：イベント処理と状態管理

import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';

function EventTrackingExample() {
  const [selectedTime, setSelectedTime] = React.useState<Date | null>(null);
  const [eventLog, setEventLog] = React.useState<string[]>([]);

  const handleChange = (e: any) => {
    setSelectedTime(e.value);
    setEventLog(prev => [...prev, `Changed: ${e.value?.toLocaleTimeString()}`]);
  };

  const handleOpen = (e: any) => {
    setEventLog(prev => [...prev, 'Popup opened']);
  };

  const handleClose = (e: any) => {
    setEventLog(prev => [...prev, 'Popup closed']);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>Time Picker with Event Tracking</h3>
      <TimePickerComponent
        value={selectedTime}
        change={handleChange}
        open={handleOpen}
        close={handleClose}
        placeholder="Select time to track events"
      />

      <div style={{ marginTop: '20px', padding: '10px', border: '1px solid #ccc' }}>
        <h4>Event Log:</h4>
        <ul>
          {eventLog.map((event, idx) => (
            <li key={idx}>{event}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default EventTrackingExample;

パターン 5：マスク付き時刻入力

import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';

function MaskedTimePickerExample() {
  const [maskedTime, setMaskedTime] = React.useState(new Date('1/1/2018 10:30 AM'));

  return (
    <div style={{ padding: '20px' }}>
      <h3>Masked Time Input</h3>
      <TimePickerComponent
        value={maskedTime}
        enableMask={true}
        format="hh:mm a"
        maskPlaceholder={{
          hour: 'HH',
          minute: 'MM',
          second: 'SS',
        }}
        change={(e: any) => setMaskedTime(e.value)}
        placeholder="Enter time (HH:MM AM/PM)"
      />
      <p>Masked input helps users enter time in correct format</p>
    </div>
  );
}

export default MaskedTimePickerExample;

主な Props のリファレンス

Prop	型	デフォルト値	説明
value	Date	null	現在選択されている時刻の値
format	string	文化に基づく	時刻の表示形式（例：「HH:mm」、「hh:mm a」）
min	Date	00:00	選択できる最小時刻
max	Date	00:00	選択できる最大時刻
step	number	30	リスト項目間の時刻間隔（分）
enabled	boolean	true	コンポーネントを有効化／無効化します
readonly	boolean	false	読み取り専用の状態（編集不可）
placeholder	string	-	入力欄のプレースホルダーテキスト
openOnFocus	boolean	false	入力欄にフォーカスしたときにポップアップを開きます
enableMask	boolean	false	マスク入力モードを有効にします
enableRtl	boolean	false	右から左へのレイアウトを有効にします
strictMode	boolean	false	入力を検証し、有効な時刻に制限します
showClearButton	boolean	true	クリアボタンを表示／非表示にします
fullScreenMode	boolean	false	モバイルの全画面モード
cssClass	string	-	スタイリング用のカスタム CSS クラス
floatLabelType	string	Never	フローティングラベルの位置
allowEdit	boolean	true	手動での入力編集を許可します
locale	string	'en-US'	時刻の書式設定に使用するロケール
scrollTo	Date	-	ポップアップのデフォルトのスクロール位置
width	string/number	-	コンポーネントの幅
zIndex	number	1000	ポップアップの Z-index
serverTimezoneOffset	number	-	処理に使用するサーバーのタイムゾーンオフセット
htmlAttributes	object	{}	カスタム HTML 属性

関連スキル

• チェックボックスの実装 - 複数の時刻オプションを選択する場合
• DatePicker の実装 - 日付と時刻を選択する場合
• レンジスライダーの実装 - 時刻範囲を選択する場合

---

次のステップ：

• references/getting-started.md を読んで、最初の TimePicker をインストールし、セットアップします
• references/time-format-and-display.md で書式設定オプションを確認します
• references/time-range-and-selection.md で時刻の制約を確認します
• references/advanced-patterns.md で複雑なシナリオを確認します