syncfusion-react-daterangepicker

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

Syncfusion React DateRangePicker コンポーネントは、プリセット範囲、日付の検証、複数の日付形式、キーボード操作、モバイルに最適化された全画面モードに対応し、直感的に日付範囲を選択できます。

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

はじめに

📄 参照： references/getting-started.md

• npm（@syncfusion/ej2-react-calendars）によるインストール
• CSS のインポートとテーマの設定
• 基本的な DateRangePicker の実装
• クラスコンポーネントと関数コンポーネントの設定
• コンポーネントの初期化と構造
• 開発サーバーの起動
• よくある問題のトラブルシューティング

日付範囲の選択

📄 参照： references/date-range-selection.md

• 開始日と終了日のプロパティ
• 日付範囲の検証パターン
• 最小日付と最大日付の制約
• 無効な日付の設定
• 日付範囲のプリセット（過去 7 日間、過去 30 日間など）
• 値のバインディングと双方向更新
• 読み取り専用状態と無効状態
• プレースホルダーとラベル

日付範囲の書式設定

📄 参照： references/date-range-formatting.md

• 日付形式文字列のオプション（MM/dd/yyyy、dd-MMM-yyyy など）
• 表示形式と入力形式
• ロケールに基づく日付書式設定
• 開始日と終了日の間のカスタム区切り文字
• フロートラベルの種類（Never、Always、Auto）
• プレースホルダーテキストのカスタマイズ
• DOM 属性用の htmlAttributes

イベントとメソッド

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

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

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

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

• cssClass による CSS クラスのカスタマイズ
• テーマのオプション（Material、Bootstrap、Fluent、Tailwind、Fabric）
• モバイルデバイス向けの全画面モード
• RTL（右から左）言語のサポート
• プリセット範囲のカスタマイズ
• Z インデックスの管理
• 幅と高さの設定
• アクセシビリティ機能と ARIA 属性

API リファレンス

📄 参照： references/api-reference.md

• プロパティ一覧（35 以上）
• シグネチャ付きの全メソッド（8 メソッド）
• イベント引数付きの全イベント（12 イベント）
• 型定義とインターフェース
• デフォルト値と制約
• 各プロパティとメソッドのユースケース

高度なパターン

📄 参照： references/advanced-patterns.md

• 日付範囲の検証を伴うフォーム送信
• キーボードショートカットとキー操作
• サーバーのタイムゾーンオフセットへの対応
• 永続化と localStorage
• 複数コンポーネントの連携（開始日／終了日のバインディング）
• 遅延読み込みによるパフォーマンスの最適化
• エラー処理と検証パターン
• 複雑な日付範囲のシナリオ（会計年度、四半期）

クイックスタート

import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-buttons/styles/material3.css';
import '@syncfusion/ej2-lists/styles/material3.css';
import '@syncfusion/ej2-inputs/styles/material3.css';
import '@syncfusion/ej2-popups/styles/material3.css';
import '@syncfusion/ej2-calendars/styles/material3.css';

function App() {
  const [selectedRange, setSelectedRange] = React.useState<[Date, Date] | null>(null);

  const handleDateRangeChange = (e: any) => {
    setSelectedRange([e.startDate, e.endDate]);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Select Date Range</h2>
      <DateRangePickerComponent
        id="daterangepicker"
        placeholder="Select a range"
        change={handleDateRangeChange}
      />
      {selectedRange && (
        <p>
          Selected: {selectedRange[0]?.toLocaleDateString()} - {selectedRange[1]?.toLocaleDateString()}
        </p>
      )}
    </div>
  );
}

export default App;

よく使われるパターン

パターン 1：プリセットオプション付きの日付範囲

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

function ReportingDashboard() {
  const [dateRange, setDateRange] = React.useState<[Date, Date] | null>(null);

  const getDateRangePresets = () => {
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(today.getDate() - 1);
    
    const last7Days = new Date(today);
    last7Days.setDate(today.getDate() - 7);
    
    const last30Days = new Date(today);
    last30Days.setDate(today.getDate() - 30);
    
    const thisMonth = new Date(today.getFullYear(), today.getMonth(), 1);
    const lastMonth = new Date(today.getFullYear(), today.getMonth(), 0);

    return [
      { text: 'Today', value: [today, today] },
      { text: 'Yesterday', value: [yesterday, yesterday] },
      { text: 'Last 7 Days', value: [last7Days, today] },
      { text: 'Last 30 Days', value: [last30Days, today] },
      { text: 'This Month', value: [thisMonth, today] },
      { text: 'Last Month', value: [new Date(today.getFullYear(), today.getMonth() - 1, 1), lastMonth] },
    ];
  };

  const handlePresetClick = (start: Date, end: Date) => {
    setDateRange([start, end]);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>Analytics Report</h3>
      <DateRangePickerComponent
        id="daterangepicker"
        placeholder="Select report date range"
        startDate={dateRange?.[0]}
        endDate={dateRange?.[1]}
        change={(e: any) => setDateRange([e.startDate, e.endDate])}
      />
      
      <div style={{ marginTop: '15px' }}>
        {getDateRangePresets().map((preset) => (
          <button
            key={preset.text}
            onClick={() => handlePresetClick(preset.value[0], preset.value[1])}
            style={{ marginRight: '10px', padding: '5px 10px' }}
          >
            {preset.text}
          </button>
        ))}
      </div>
    </div>
  );
}

export default ReportingDashboard;

パターン 2：検証付きの日付範囲

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

function BookingForm() {
  const [dateRange, setDateRange] = React.useState<[Date, Date] | null>(null);
  const [validationError, setValidationError] = React.useState<string>('');

  const minDate = new Date();
  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 90); // 90 days from now

  const handleDateRangeChange = (e: any) => {
    setValidationError('');
    
    if (!e.startDate || !e.endDate) {
      return;
    }

    const start = new Date(e.startDate);
    const end = new Date(e.endDate);

    // Validation checks
    if (start > end) {
      setValidationError('Start date must be before end date');
      return;
    }

    const daysDifference = (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24);
    if (daysDifference > 30) {
      setValidationError('Date range cannot exceed 30 days');
      return;
    }

    setDateRange([start, end]);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (dateRange && !validationError) {
      console.log('Booking dates:', {
        checkIn: dateRange[0].toLocaleDateString(),
        checkOut: dateRange[1].toLocaleDateString(),
      });
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '20px', maxWidth: '500px' }}>
      <h3>Book Your Stay</h3>
      
      <label style={{ display: 'block', marginBottom: '8px' }}>
        Select Check-in and Check-out Dates (Max 30 days)
      </label>
      
      <DateRangePickerComponent
        id="daterangepicker"
        placeholder="Select check-in and check-out"
        min={minDate}
        max={maxDate}
        startDate={dateRange?.[0]}
        endDate={dateRange?.[1]}
        change={handleDateRangeChange}
        style={{ width: '100%', marginBottom: '8px' }}
      />

      {validationError && (
        <div style={{ color: 'red', marginBottom: '10px', fontSize: '14px' }}>
          ⚠️ {validationError}
        </div>
      )}

      <ButtonComponent 
        type="submit" 
        isPrimary={true} 
        disabled={!dateRange || !!validationError}
      >
        Book Now
      </ButtonComponent>
    </form>
  );
}

export default BookingForm;

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

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

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

  const handleSelect = (e: any) => {
    setEventLog(prev => [
      ...prev, 
      `Selected: ${e.startDate?.toLocaleDateString()} to ${e.endDate?.toLocaleDateString()}`
    ]);
  };

  const handleChange = (e: any) => {
    setDateRange([e.startDate, e.endDate]);
    setEventLog(prev => [...prev, `Changed: ${new Date().toLocaleTimeString()}`]);
  };

  const handleOpen = (e: any) => {
    setEventLog(prev => [...prev, `Popup opened at ${new Date().toLocaleTimeString()}`]);
  };

  const handleClose = (e: any) => {
    setEventLog(prev => [...prev, `Popup closed at ${new Date().toLocaleTimeString()}`]);
  };

  const clearLog = () => {
    setEventLog([]);
  };

  return (
    <div style={{ padding: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
      <div>
        <h3>DateRangePicker</h3>
        <DateRangePickerComponent
          id="daterangepicker"
          placeholder="Select date range"
          select={handleSelect}
          change={handleChange}
          open={handleOpen}
          close={handleClose}
        />
      </div>

      <div style={{ padding: '10px', border: '1px solid #ccc', borderRadius: '4px' }}>
        <h3>Event Log</h3>
        <button 
          onClick={clearLog}
          style={{ 
            padding: '5px 10px', 
            marginBottom: '10px',
            backgroundColor: '#f0f0f0',
            border: '1px solid #ccc',
            cursor: 'pointer'
          }}
        >
          Clear Log
        </button>
        <ul style={{ maxHeight: '300px', overflowY: 'auto', margin: 0, paddingLeft: '20px' }}>
          {eventLog.map((event, idx) => (
            <li key={idx} style={{ marginBottom: '5px', fontSize: '12px' }}>
              {event}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default EventTrackingExample;

パターン 5：カスタム日付範囲形式

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

function DateFormatDemo() {
  const [formatType, setFormatType] = React.useState<'short' | 'long' | 'custom'>('short');
  const [dateRange, setDateRange] = React.useState<[Date, Date] | null>(null);

  const getFormat = () => {
    switch (formatType) {
      case 'short':
        return 'M/d/yyyy';
      case 'long':
        return 'MMMM d, yyyy';
      case 'custom':
        return 'dd-MMM-yy';
      default:
        return 'M/d/yyyy';
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>Date Range Format Options</h3>
      
      <div style={{ marginBottom: '15px' }}>
        <label style={{ marginRight: '10px' }}>Format Type:</label>
        {(['short', 'long', 'custom'] as const).map((format) => (
          <label key={format} style={{ marginRight: '15px' }}>
            <input
              type="radio"
              name="format"
              value={format}
              checked={formatType === format}
              onChange={(e) => setFormatType(e.target.value as any)}
            />
            {format.charAt(0).toUpperCase() + format.slice(1)}
          </label>
        ))}
      </div>

      <div style={{ marginBottom: '10px', padding: '10px', backgroundColor: '#f5f5f5' }}>
        <strong>Format String:</strong> {getFormat()}
      </div>

      <DateRangePickerComponent
        id="daterangepicker"
        placeholder="Select date range"
        format={getFormat()}
        startDate={dateRange?.[0]}
        endDate={dateRange?.[1]}
        change={(e: any) => setDateRange([e.startDate, e.endDate])}
      />

      {dateRange && (
        <div style={{ marginTop: '15px', padding: '10px', backgroundColor: '#e8f5e9' }}>
          <p>
            <strong>Formatted Output:</strong> {dateRange[0].toLocaleDateString('en-US')} - {dateRange[1].toLocaleDateString('en-US')}
          </p>
        </div>
      )}
    </div>
  );
}

export default DateFormatDemo;

主要な Props のリファレンス

• Prop: startDate: Type: Date — Default: null — 範囲の初期開始日です。
• Prop: endDate: Type: Date — Default: null — 範囲の初期終了日です。
• Prop: min: Type: Date — Default: new Date(1900, 0, 1) — 選択可能な最小の日付です。
• Prop: max: Type: Date — Default: new Date(2099, 11, 31) — 選択可能な最大の日付です。
• Prop: value: Type: Date[] | DateRange — Default: null — 開始日と終了日を取得または設定します。
• Prop: format: Type: string | RangeFormatObject — Default: null — 日付の表示形式と入力形式です。
• Prop: placeholder: Type: string — Default: null — 入力欄のプレースホルダーテキストです。
• Prop: enabled: Type: boolean — Default: true — コンポーネントを有効または無効にします（disabled ではなく enabled を使用してください）。
• Prop: readonly: Type: boolean — Default: false — 読み取り専用状態にし、編集を禁止します。
• Prop: allowEdit: Type: boolean — Default: true — 入力欄のテキストを手動で編集できるようにします。
• Prop: cssClass: Type: string — Default: '' — ルート要素にカスタム CSS クラスを追加します。
• Prop: floatLabelType: Type: FloatLabelType | string — Default: Never — フローティングラベルの動作（Never、Always、Auto）です。
• Prop: separator: Type: string — Default: '-' — 入力欄で開始日と終了日の間に表示する区切り文字列です。
• Prop: locale: Type: string — Default: 'en-US' — 書式設定とローカライズに使用するロケールです。
• Prop: inputFormats: Type: string[] | RangeFormatObject[] — Default: null — 入力値の解析に使用できる形式です。
• Prop: keyConfigs: Type: object — Default: null — カスタムキーボードショートカットのマッピングです。
• Prop: firstDayOfWeek: Type: number — Default: null — カレンダー表示で週の始まりとする曜日です。
• Prop: dayHeaderFormat: Type: DayHeaderFormats — Default: Short — ヘッダーに表示する曜日名の形式です。
• Prop: start: Type: CalendarView — Default: Month — ポップアップを開いたときの初期カレンダービューです。
• Prop: depth: Type: CalendarView — Default: Month — カレンダーで移動できる最大の階層です。
• Prop: weekNumber: Type: boolean — Default: false — カレンダーの各行に週番号を表示します。
• Prop: weekRule: Type: WeekRule — Default: FirstDay — 年の最初の週を定義するルールです。
• Prop: minDays: Type: number — Default: null — 選択範囲で許可される最小日数です。
• Prop: maxDays: Type: number — Default: null — 選択範囲で許可される最大日数です。
• Prop: strictMode: Type: boolean — Default: false — true の場合、有効な範囲のみ入力できます。
• Prop: showClearButton: Type: boolean — Default: true — クリアボタンの表示を切り替えます。
• Prop: fullScreenMode: Type: boolean — Default: false — モバイルで全画面ポップアップを使用します。
• Prop: htmlAttributes: Type: { [key: string]: string } — Default: {} — コンポーネント要素に適用する追加の HTML 属性です。
• Prop: serverTimezoneOffset: Type: number — Default: null — 初期値の処理に使用する、分単位のサーバータイムゾーンオフセットです。
• Prop: width: Type: number | string — Default: '' — コンポーネントの入力欄の幅です。
• Prop: zIndex: Type: number — Default: 1000 — ポップアップ要素の z-index です。

関連スキル

• カレンダーの実装 - 単一の日付を選択する場合
• DatePicker の実装 - 基本的な日付選択を行う場合
• TimePicker の実装 - 範囲内の時刻を選択する場合

---

次のステップ：

• references/getting-started.md を読んで、最初の DateRangePicker をインストールしてセットアップします
• references/date-range-selection.md で範囲選択のパターンを確認します
• references/date-range-formatting.md で書式設定オプションを確認します
• references/advanced-patterns.md で複雑なシナリオを確認します
• references/api-reference.md で API ドキュメント全体を参照します