IgrCalender – コードビハインドで日付を切り替えたい

IgrCalendar では、コードビハインドから日付を切り替えることが可能です。

カレンダーの設定

日付を変更するには、IgrCalendar の 参照（ref） を取得し、そのインスタンスの activeDate と value プロパティを設定します。

• activeDate : カレンダーの表示中の月を切り替える
• value : 実際の選択日付を設定する

以下の例では、ボタンをクリックすると「2020年1月1日」に切り替わります。

import { useRef } from "react";
import { IgrButton, IgrCalendar } from "@infragistics/igniteui-react";

// デフォルトの日付
const defaultDate = new Date(2020, 0, 1);

export const App = () => {
  // カレンダーの参照を作成
  const calendarRef = useRef<IgrCalendar>(null);

  // 日付切り替え処理
  const selectDate = () => {
    const calendar = calendarRef.current;
    if (calendar) {
      calendar.activeDate = defaultDate; // 表示月を変更
      calendar.value = defaultDate;      // 選択日付を変更
    }
  };

  return (
    <>
      <IgrButton onClick={selectDate}>2020年1月1日を選択</IgrButton>
      <IgrCalendar ref={calendarRef} />
    </>
  );
};

実行結果

画面のボタンをクリックすると、カレンダーが 2020年1月1日 に切り替わり、その日付が選択状態になります。

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

関連ドキュメント

• IgrDataChart | Ignite UI for React