syncfusion-angular-daterangepicker

Syncfusion Angular DateRangePicker の実装

Angular アプリケーションに Syncfusion Essential JS 2 DateRangePicker コンポーネントを実装するための包括的なガイドです。日付範囲ピッカーの作成、範囲選択の処理、イベントの管理、スタイルのカスタマイズについて説明します。

DateRangePicker の概要

Syncfusion Angular DateRangePicker コンポーネントは、次の機能を備えた専用の日付選択ウィジェットです。

• 2つのカレンダー表示： 同期されたカレンダーで開始日と終了日を選択
• プリセット範囲： 「過去7日間」、「今月」、「先月」、「カスタム」などの定義済みオプション
• 範囲の検証： 最小／最大日付、無効な範囲、必須の範囲の長さ
• 日付の書式設定： 区切り文字やパターンに対応したカスタマイズ可能な日付形式
• イベントシステム： created、destroyed、change、select、rangeSelected、open、close、renderDayCell イベント
• キーボードショートカット： Tab、矢印キー、Enter、Escape による完全なキーボードアクセシビリティ
• ローカライズ対応： ロケール固有の日付形式、曜日ヘッダー、月名
• アクセシビリティ： WCAG 2.2 に完全準拠、ARIA 属性、スクリーンリーダー対応
• 豊富なカスタマイズ： CSS クラス、カスタムテンプレート、日付セルのレンダリング
• モバイル最適化： タッチ操作に適したインターフェース、レスポンシブデザイン、全画面モード

パッケージ： @syncfusion/ej2-angular-calendars

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

ニーズに応じて、以下のリファレンスを参照してください。

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールとモジュールのセットアップ
• CSS テーマのインポートと依存関係
• DateRangePicker の基本的な実装
• Angular でのコンポーネントの初期化
• 開始日と終了日の設定
• セットアップの実行とテスト

日付範囲の選択

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

• 1回のクリックによる範囲選択
• 順次の日付選択（開始日をクリックしてから終了日をクリック）
• 日付範囲の値のバインディング（startDate、endDate プロパティ）
• 最小／最大日付の制約
• 範囲の検証とエラー処理
• 無効な日付範囲
• 選択のクリア

プリセット範囲

📄 参照： references/preset-ranges.md

• 定義済みの範囲オプション（過去7日間、先月など）
• カスタムプリセットの設定
• プリセットのプログラムによる適用
• 動的なプリセットの生成
• プリセット変更イベント
• プリセットと制約の組み合わせ

イベントとメソッド

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

• イベントハンドラー（change、select、rangeSelected、open、close）
• 範囲選択イベントの詳細（startDate、endDate、daySpan）
• プログラムによるメソッド（show()、hide()、getSelectedRange()）
• 作成および破棄のライフサイクルイベント
• カスタムスタイル設定のための RenderDayCell
• メソッドの戻り値の型とパラメーター

日付の書式設定と制約

📄 参照： references/date-formatting-and-constraints.md

• 日付形式のパターンと区切り文字
• 複数形式のサポート（format と inputFormats）
• 最小／最大日付の制約
• 最小／最大日数の検証
• 無効な日付の設定
• 形式エラーの処理
• ロケール固有の日付形式

キーボード操作とアクセシビリティ

📄 参照： references/keyboard-navigation-and-accessibility.md

• Tab と Shift+Tab によるナビゲーション
• 日付移動用の矢印キー
• 範囲の選択と確定に使う Enter
• ピッカーを閉じる Escape
• Alt キーのショートカット
• スクリーンリーダーとの互換性
• ARIA ラベルとロール
• WCAG 2.2 AA 準拠
• フォーカス管理

スタイリングとカスタマイズ

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

• CSS クラスのカスタマイズ（.e-daterangepicker、.e-calendar、.e-range-header）
• テーマの選択（Material、Bootstrap、Tailwind、Fabric）
• ダークモードの実装
• renderDayCell による日付セルのカスタムスタイリング
• 無効な日付のスタイリング
• プリセットボタンのスタイリング
• ホバー状態とフォーカス状態
• レスポンシブレイアウトのカスタマイズ

グローバル化とローカライズ

📄 参照： references/globalization-and-localization.md

• 日付の書式設定に使用する Locale プロパティ
• アラビア語、ヘブライ語の RTL（右から左）表示のサポート
• 曜日ヘッダーの書式（Short、Narrow、Abbreviated、Wide）
• 月名と曜日名のローカライズ
• カスタムロケールのサポート
• タイムゾーンの処理
• 日付書式のローカライズ

API リファレンス

📄 参照： references/api-reference.md

• 説明付きの全プロパティのリファレンス
• 戻り値の型を含むすべてのメソッドシグネチャ
• イベント引数の型と構造
• 型インターフェイス（RangeEventArgs、NavigatingEventArgs など）
• CSS クラスとスタイリング用フック
• ブラウザーのサポート一覧

クイックスタートの例

// app.component.ts
import { Component } from '@angular/core';
import { RangeEventArgs } from '@syncfusion/ej2-calendars';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Date range properties
  startDate: Date = new Date(2026, 2, 1);  // March 1, 2026
  endDate: Date = new Date(2026, 2, 31);   // March 31, 2026
  
  // Constraints
  minDate: Date = new Date(2020, 0, 1);
  maxDate: Date = new Date(2030, 11, 31);
  
  // Range display
  selectedRange: string = '';
  
  // Event handler
  onRangeChange(args: RangeEventArgs): void {
    console.log('Start Date:', args.startDate);
    console.log('End Date:', args.endDate);
    console.log('Days in range:', args.daySpan);
    this.updateRangeDisplay();
  }
  
  updateRangeDisplay(): void {
    if (this.startDate && this.endDate) {
      const start = this.startDate.toLocaleDateString();
      const end = this.endDate.toLocaleDateString();
      this.selectedRange = `${start} - ${end}`;
    }
  }
}

<div style="padding: 20px; font-family: Arial, sans-serif;">
  <h2>DateRangePicker Example</h2>
  
  <div style="margin-bottom: 20px;">
    <label for="dateRange">Select Date Range:</label>
    <ejs-daterangepicker 
      id="dateRange"
      placeholder="Select a date range"
      [startDate]="startDate"
      [endDate]="endDate"
      [min]="minDate"
      [max]="maxDate"
      (change)="onRangeChange($event)">
    </ejs-daterangepicker>
  </div>
  
  <div *ngIf="selectedRange" style="padding: 10px; background-color: #f0f0f0;">
    <p><strong>Selected Range:</strong> {{ selectedRange }}</p>
  </div>
</div>

/* app.component.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';

:host ::ng-deep .e-daterangepicker {
  margin: 10px 0;
  width: 100%;
}

:host ::ng-deep .e-range-header {
  background-color: #3f51b5;
  color: white;
}

よく使われるパターン

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

よく使われる日付範囲をすばやく選択するボタン：

export class AppComponent {
  presets: any[] = [
    { label: 'Today', start: new Date(), end: new Date() },
    { label: 'Last 7 Days', start: this.getDateDaysAgo(7), end: new Date() },
    { label: 'Last 30 Days', start: this.getDateDaysAgo(30), end: new Date() },
    { label: 'This Month', start: this.getFirstDayOfMonth(), end: new Date() },
    { label: 'Last Month', start: this.getFirstDayOfLastMonth(), end: this.getLastDayOfLastMonth() }
  ];
  
  startDate: Date = new Date();
  endDate: Date = new Date();
  
  selectPreset(preset: any): void {
    this.startDate = preset.start;
    this.endDate = preset.end;
  }
  
  private getDateDaysAgo(days: number): Date {
    const date = new Date();
    date.setDate(date.getDate() - days);
    return date;
  }
  
  private getFirstDayOfMonth(): Date {
    return new Date(new Date().getFullYear(), new Date().getMonth(), 1);
  }
  
  private getFirstDayOfLastMonth(): Date {
    const date = new Date();
    return new Date(date.getFullYear(), date.getMonth() - 1, 1);
  }
  
  private getLastDayOfLastMonth(): Date {
    const date = new Date();
    return new Date(date.getFullYear(), date.getMonth(), 0);
  }
}

<div>
  <div style="margin-bottom: 10px;">
    <button *ngFor="let preset of presets" 
            (click)="selectPreset(preset)"
            style="margin-right: 5px; padding: 8px 12px;">
      {{ preset.label }}
    </button>
  </div>
  
  <ejs-daterangepicker 
    [startDate]="startDate"
    [endDate]="endDate">
  </ejs-daterangepicker>
</div>

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

カスタム制約を使用して日付範囲を検証します：

export class AppComponent {
  @ViewChild('daterangepicker') drp!: DateRangePickerComponent;
  
  startDate: Date = new Date();
  endDate: Date = new Date();
  rangeError: string = '';
  
  minDate: Date = new Date(2020, 0, 1);
  maxDate: Date = new Date(2030, 11, 31);
  minDays: number = 1;      // At least 1 day
  maxDays: number = 90;     // At most 90 days
  
  onRangeChange(args: RangeEventArgs): void {
    this.rangeError = '';
    
    // Validate date range
    if (args.daySpan < this.minDays) {
      this.rangeError = `Range must be at least ${this.minDays} day(s)`;
      return;
    }
    
    if (args.daySpan > this.maxDays) {
      this.rangeError = `Range cannot exceed ${this.maxDays} days`;
      return;
    }
    
    this.startDate = args.startDate;
    this.endDate = args.endDate;
  }
  
  isRangeValid(): boolean {
    return this.rangeError === '';
  }
}

パターン 3：リアクティブフォームとの連携

DateRangePicker を Reactive Forms と連携します：

export class AppComponent implements OnInit {
  reportForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.reportForm = this.fb.group({
      reportName: ['', Validators.required],
      startDate: [new Date(2026, 0, 1), Validators.required],
      endDate: [new Date(), Validators.required]
    });
  }
  
  ngOnInit(): void {
    this.reportForm.get('startDate')?.valueChanges.subscribe(date => {
      console.log('Start date changed:', date);
      this.validateDateRange();
    });
    
    this.reportForm.get('endDate')?.valueChanges.subscribe(date => {
      console.log('End date changed:', date);
      this.validateDateRange();
    });
  }
  
  validateDateRange(): void {
    const start = this.reportForm.get('startDate')?.value;
    const end = this.reportForm.get('endDate')?.value;
    
    if (start && end && start > end) {
      this.reportForm.get('endDate')?.setErrors({ 'invalidRange': true });
    } else {
      this.reportForm.get('endDate')?.setErrors(null);
    }
  }
  
  submitForm(): void {
    if (this.reportForm.valid) {
      console.log('Form values:', this.reportForm.value);
    }
  }
}

<form [formGroup]="reportForm" (ngSubmit)="submitForm()">
  <div>
    <label>Report Name:</label>
    <ejs-textbox 
      formControlName="reportName"
      placeholder="Enter report name">
    </ejs-textbox>
  </div>
  
  <div>
    <label>Report Period:</label>
    <ejs-daterangepicker 
      [formControl]="reportForm.get('startDate')"
      [endDate]="reportForm.get('endDate')?.value">
    </ejs-daterangepicker>
  </div>
  
  <button type="submit" [disabled]="!reportForm.valid">Generate Report</button>
</form>

パターン 4：動的な範囲制約

ビジネスロジックに基づいて範囲制約を更新します：

export class AppComponent {
  startDate: Date = new Date();
  endDate: Date = new Date();
  
  // Dynamic constraints
  minDate: Date = new Date();
  maxDate: Date = new Date();
  
  reportType: string = 'daily';
  
  onReportTypeChange(type: string): void {
    this.reportType = type;
    this.updateConstraints();
  }
  
  private updateConstraints(): void {
    const today = new Date();
    
    switch (this.reportType) {
      case 'daily':
        // Last 7 days only
        this.minDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
        this.maxDate = today;
        break;
      
      case 'monthly':
        // Last 12 months
        this.minDate = new Date(today.getFullYear() - 1, today.getMonth(), 1);
        this.maxDate = today;
        break;
      
      case 'yearly':
        // Last 5 years
        this.minDate = new Date(today.getFullYear() - 5, 0, 1);
        this.maxDate = today;
        break;
    }
  }
}

パターン 5：無効な日付範囲

特定の日付範囲（祝日、選択不可の日付）を無効にします：

export class AppComponent {
  disabledRanges: Array<{start: Date, end: Date}> = [
    { start: new Date(2026, 11, 20), end: new Date(2026, 11, 31) }, // Christmas season
    { start: new Date(2026, 0, 1), end: new Date(2026, 0, 3) }      // New Year
  ];
  
  startDate: Date = new Date();
  endDate: Date = new Date();
  
  onRenderDayCell(args: RenderDayCellEventArgs): void {
    // Disable dates in disabled ranges
    for (const range of this.disabledRanges) {
      if (args.date >= range.start && args.date <= range.end) {
        args.isDisabled = true;
        break;
      }
    }
  }
}

主要な Props のリファレンス

Prop	型	説明	例
startDate	Date	範囲の開始日	[startDate]="start"
endDate	Date	範囲の終了日	[endDate]="end"
value	Date[] or DateRange	選択した日付範囲（配列またはオブジェクト）	[(ngModel)]="dateRange"
min	Date	選択可能な最小の日付	[min]="minDate"
max	Date	選択可能な最大の日付	[max]="maxDate"
minDays	number	範囲の最小日数	[minDays]="1"
maxDays	number	範囲の最大日数	[maxDays]="90"
format	string	日付の表示形式	format="dd/MM/yyyy"
separator	string	範囲の区切り文字	separator=" to "
placeholder	string	プレースホルダーテキスト	placeholder="Select date range"
presets	PresetsModel[]	定義済みの範囲オプション	[presets]="presets"
strictMode	boolean	厳密な日付検証	[strictMode]="true"
readonly	boolean	読み取り専用の入力フィールド	[readonly]="false"
enabled	boolean	コンポーネントの有効化／無効化	[enabled]="true"
locale	string	カルチャ／言語コード	locale="en-US"
enableRtl	boolean	RTL レイアウトの有効化	[enableRtl]="false"
cssClass	string	カスタム CSS クラス	cssClass="custom-drp"
width	number | string	コンポーネントの幅	width="300px"
allowEdit	boolean	テキストの手動入力を許可	[allowEdit]="true"
openOnFocus	boolean	入力欄にフォーカスしたときにピッカーを開く	[openOnFocus]="true"
showClearButton	boolean	クリアボタンを表示	[showClearButton]="true"
depth	CalendarView	カレンダー表示の深さ	depth="Month"

一般的なユースケース

ユースケース 1：レポートの日付範囲の選択

• ユーザーがレポート生成の日付範囲を選択します
• 最小／最大の日付制約を適用します
• プリセット範囲（過去 7 日間、先月など）をサポートします
• 解決策：開始日／終了日とプリセット、最小／最大の制約を組み合わせます
• 参考：プリセット範囲 + 日付の書式設定と制約

ユースケース 2：予約システムの日付範囲

• 予約のチェックイン日とチェックアウト日を選択します
• 過去の日付と予約不可日を無効にします
• 日付範囲の日数を表示します
• 解決策：最小日付の制約、無効な日付範囲を指定する renderDayCell、daySpan の計算を使用します
• 参考：日付範囲の選択 + イベントとメソッド

ユースケース 3：分析用の日付フィルター

• 分析ダッシュボードの日付範囲を選択します
• 素早く選択できる複数のプリセットオプション
• モバイルに対応したレスポンシブなインターフェース
• 解決策：レスポンシブなスタイル設定とタッチ操作の最適化を組み合わせてプリセットを使用します
• 参考：プリセット範囲 + スタイル設定とカスタマイズ

ユースケース 4：アクセシブルなフォームフィールド

• DateRangePicker をフォームに統合し、キーボード操作に完全対応させます
• スクリーンリーダーに対応し、WCAG 2.2 に準拠します
• 解決策：リアクティブフォームと適切な ARIA ラベルを使用します
• 参考：キーボード操作とアクセシビリティ

ユースケース 5：国際化対応の日付ピッカー

• 複数の言語と日付形式をサポートします
• アラビア語やヘブライ語では RTL 表示にします
• ロケール固有の書式設定に対応します
• 解決策：ロケールプロパティと書式設定のカスタマイズを使用します
• 参考：グローバル化とローカライズ

関連スキル

• Syncfusion Angular コンポーネントの実装 - すべての Angular コンポーネントを対象とするメインライブラリガイド
• Calendar - 日付選択用の単一カレンダーコンポーネント
• DatePicker - カレンダーオーバーレイ付きの単一日付ピッカー
• DateTimePicker - 日付と時刻を組み合わせて選択するコンポーネント
• TimePicker - 時刻選択コンポーネント

---

次のステップ： 特定のニーズに応じて上記のリファレンスガイドを選ぶか、ユースケースに合った一般的なパターンのセクションを確認してください。