React 日付選択の概要

    日付選択コンポーネントは、ドロップダウン カレンダー UI を使用して日、月、年を直感的に選択できます。これは、アプリケーション ユーザーが特定の日付を選択する必要があり、複数のエディターを組み合わせて日付範囲 UI を作成する場合に便利です。

    React 日付選択の例

    このサンプルは、単一の日付を選択するオプションを使用して IgrDatePicker を作成する方法を示しています。

    依存関係

    日付選択コンポーネントをインストールするときに core と input のパッケージもインストールする必要があります。

    npm install --save igniteui-react-core
    npm install --save igniteui-react-inputs
    npm install --save igniteui-react-layouts
    

    モジュールの要件

    日付選択コンポーネントを使用するには、以下のモジュールを登録する必要があります。

    import { IgrDatePickerModule } from 'igniteui-react-inputs';
    
    IgrDatePickerModule.register();
    

    使用方法

    React 日付選択エディター コンポーネントは、デフォルトでは、テキスト領域、カレンダー ドロップダウン ボタン、およびクリア ボタンの 3 つの構成されます。これらの領域について以下に説明します。

    • テキスト領域: エディターの value プロパティに保存されている選択した日付を表示します。

    • カレンダー: カレンダー ボタンをクリックすると、日付選択のカレンダー ドロップダウンが開きます。カレンダーが開き、現在選択されている value の月が表示されます。value が指定されていない場合、カレンダーは現在の日付に対応する月を表示します。上部の月をクリックすると、月のリストが表示され、年も同様です。月と年の可視化の左右にある矢印ボタンは、表示されている月を時系列で増減します。

    • クリア ボタン: x アイコンは現在の値をクリアします。

    プロパティ タイプ 説明
    iconColor string カレンダー ボタンの色を変更します。
    allowTextInput bool このプロパティを true に切り替えることで、日付ピッカーの値を入力して変更できます。
    dateFormat enum デフォルトは DateShort です。例: 'mm/dd/yyyy'。DateLong に設定すると、エディターに表示される曜日を含めた日付が表示されます。例: 2021年4月14日水曜日。
    firstDayOfWeek enum デフォルトは日曜日です。特定の曜日が、カレンダーの各週の行の最初の日として使用されます。例えば、月曜日から日曜日。
    formatString string DateShort を使用すると、日付の形式を構成できます。例えば、'dd/mm/yyyy'。dateFormat の DateLong と formatString が設定されている場合、dateFormat は無視されることに注意してください。
    label string 日付ピッカーの左上隅の日付の上にカスタム テキストを表示します。
    minDate DateTime 以前の日付が選択または表示されないように制限します。
    maxDate DateTime 後の日付が選択または表示されないように制限します。
    placeholder string カレンダーの編集部分の値がクリアされたときに表示されるカスタム文字列。
    showClearButton bool デフォルトは true で、クリア ボタンはカレンダー ボタンのすぐ左にあり、X で視覚化されます。クリックすると、日付ピッカーの value がクリアされます。クリア ボタンの表示は、オンとオフを切り替えることができます。
    showTodayButton bool 本日は、カレンダーが開かれた日付のすぐ下に表示されます。クリックすると、現在の日付が選択されます。本日のボタンの表示は、オンとオフを切り替えることができます。
    showWeekNumbers bool 週番号は、日付ピッカーのドロップダウン部分の日付のすべての行の左側に番号として表示できます。週番号の表示のオンとオフを切り替えることができます。
    firstWeekOfYear enum 年間の週の開始番号を構成します。FirstDay、FirstFourDayWeek、FirstFullWeek に設定できます。
    openOnFocus bool デフォルトでは、日付ピッカーのドロップダウン部分はシングル クリックで開かれ、ユーザーはカレンダー ボタンをクリックしてカレンダーをドロップダウンする必要があります。
    value date 日付ピッカーの値を設定し、ドロップダウン カレンダーで選択します。

    ユーザーは、コントロールのさまざまなテキスト プロパティを使用して日付選択のフォントをカスタマイズできます。使用できるプロパティは textColorTextFontFamilyTextFontSizeTextFontStyle、および TextFontWeight です。

    編集

    次の例は、IgrDatePicker で編集を有効にする方法を示しています。

    日付制限

    次の例は、IgrDatePicker で選択した日付を制限する方法を示しています。

    日付の書式

    次の例は、IgrDatePicker で長い日付を適用する方法を示しています。

    日付範囲

    次の例は、複数の IgrDatePicker コントロールを組み合わせる方法を示しています。

    API メンバー

    以下は、上記のセクションで説明した API メンバーのリストです: