Angular Date Picker

    Ignite UI for Angular Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。ピッカーは、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。

    Angular Date Picker の例

    使用方法

    はじめに

    Date Picker コンポーネントの使用を開始するには、まず、使用するモジュールに IgxDatePickerModule をインポートする必要があります。この例では、app.module.ts ファイルを使用します。

    Note

    Date Picker が IgxCalendarComponent を使用し、タッチ操作のために BrowserAnimationsModuleHammerModule に依存関係があり、これらもモジュールに追加する必要があります。

    import { HammerModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { IgxDatePickerModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule, HammerModule],
        ...
    })
    export class AppModule {}
    

    Date Picker の表示

    デフォルトのドロップダウン状態の Date Picker をインスタンス化するには、以下のコードを使用してください。

    <igx-date-picker>
        <label igxLabel>Date</label>
    </igx-date-picker>
    

    オプション

    IgxDatePickerComponentdate または string にバインドできます。

    <igx-date-picker [value]="date"></igx-date-picker>
    
    public date = new Date(2000, 0, 1);
    

    文字列がピッカーにバインドされている場合は、ISO8601 形式の日付のみの文字列である必要があります。

    <igx-date-picker [value]="'2000-01-01'"></igx-date-picker>
    

    これについての詳細は、DateTime Editor の ISO セクションにあります。

    ngModel を介して双方向バインディングが可能です:

    <igx-date-picker [(ngModel)]="date"></igx-date-picker>
    

    value 入力を介しても可能です:

    <igx-date-picker [(value)]="date"></igx-date-picker>
    

    さらに、formControlName をピッカーに設定して、リアクティブ フォームで使用することができます:

    <form [formGroup]="form">
        <igx-date-picker formControlName="datePicker"></igx-date-picker>
    </form>
    
    export class SampleFormComponent {
        // ...
        public form: FormGroup;
        constructor(private fb: FormBuilder) {
            this.form = this.fb.group({
                datePicker: ['', Validators.required]
            });
        }
    }
    
    Note

    ピッカーは常に Date 値を返します。これは、モデルにバインドされている場合、または文字列変数への双方向バインドの場合、新しい日付が選択された後、タイプが Date になることを意味します。

    コンポーネントの投影

    IgxDatePickerComponent は、IgxInput を除く IgxInputGroupComponent がサポートする子コンポーネントの投影を許可します。それは、igxLabelIgxHintigxPrefixigxSuffix です。詳細については、Label および Input トピックを参照してください。

    <igx-date-picker #datePicker>
        <igx-icon igxSuffix (click)="datePicker.open()">keyboard_arrow_down</igx-icon>
    </igx-date-picker>
    

    上記のサンプルでは、​​入力の最後、デフォルトのクリア アイコンの直後に追加のトグル アイコンが追加されます。プレフィックスとサフィックスを次々に積み重ねることができるため、これによってデフォルトのトグル アイコンが削除されることはありません。

    トグル アイコンとクリア アイコンのカスタマイズ

    IgxDatePickerComponentIgxPickerToggleComponentIgxPickerClearComponent で構成できます。これらを使用すると、独自のクリック ハンドラーを追加しなくても、トグル アイコンとクリア アイコンを変更できます。

     <igx-date-picker>
        <label igxLabel>Select a Date</label>
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_view_day</igx-icon>
        </igx-picker-toggle>
        <igx-picker-clear igxSuffix>
            <igx-icon>delete</igx-icon>
        </igx-picker-clear>
    </igx-date-picker>
    

    カスタム アクション ボタン

    ピッカーのアクション ボタンは、次の 2 つの方法で変更できます:

    • ボタンのテキストは、todayButtonLabelcancelButtonLabel 入力プロパティを使用して変更できます:

      <igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>
      
    • ボタン全体は、igxPickerActions ディレクティブを使用してテンプレート化できます。これを使用すると、日付ピッカーの calendar とそのすべてのメンバーにアクセスできます。

      <igx-date-picker>
        <ng-template igxPickerActions let-calendar>
            <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
        </ng-template>
      </igx-date-picker>
      

    キーボード ナビゲーション

    キーボードを使用して IgxDatePickerComponent のカレンダー UI を開いたり閉じたりすることは、dropdown モードでのみ使用でき、以下のキーの組み合わせを介してトリガーできます。

    キー 説明
    Space カレンダーのポップアップを表示し、フォーカスを合わせます。
    Alt + カレンダーのポップアップを表示し、フォーカスを合わせます。
    Esc カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。
    Enter カレンダーのポップアップを閉じ、フォーカスされた日付を選択して、フォーカスを入力フィールドに移動します。
    Alt + カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。

    IgxDatePickerComponentIgxDateTimeEditorDirective を使用するため、キーボード ナビゲーションを継承します。

    コード例

    ダイアログ モード

    IgxDatePickerComponent は、dialog モードもサポートしています:

    <igx-date-picker [mode]="'dropdown'"></igx-date-picker>
    

    表示および入力形式

    inputFormat および displayFormat は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。inputFormat プロパティは、ピッカーが dropdown モードのときに使用され、入力の編集可能なマスクとそのプレースホルダー (何も設定されていない場合) を管理します。さらに、inputFormat はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。

    注意すべき点は、ピッカーが datemonth の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、d/M/yydd/MM/yy になります。これは編集中にのみ適用されます。

    一方、displayFormat は Angular の DatePipe を使用し、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。displayFormat が指定されていない場合、ピッカーは inputFormatdisplayFormat として使用します。

    これらの詳細については、IgxDateTimeEditor の例のセクションを参照してください。

    注: IgxDatePicker が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。

    増加および減少

    IgxDatePickerComponent は、increment メソッドと decrement メソッドを公開します。どちらも IgxDateTimeEditorDirective から取得され、現在設定されている日付の特定の DatePart を増加および減少するために使用できます。

    <igx-date-picker #datePicker>
        <igx-icon igxPrefix (click)="datePicker.increment(DatePart.Month, 3)">keyboard_arrow_up</igx-icon>
        <igx-icon igxPrefix (click)="datePicker.decrement(DatePart.Year. 4)">keyboard_arrow_down</igx-icon>
    </igx-date-picker>
    

    また、spinDelta 入力プロパティとして、現在設定されている日付の特定の日付部分を増加または減少するために使用できます。

    <igx-date-picker [spinDelta]="{date: 2, month: 3, year: 4}"></igx-date-picker>
    

    Angular Forms で

    IgxDatePickerComponent は、コア FormsModuleNgModel、および ReactiveFormsModule (FormControlFormGroup など) からのすべてのディレクティブをサポートします。これには、フォーム バリデーター機能も含まれます。さらに、コンポーネントの minValue プロパティと maxValue プロパティはフォーム バリデーターとして機能します。

    リアクティブ フォームの統合トピックにアクセスすると、IgxDatePickerComponent をリアクティブ フォームで確認できます。

    日付ピッカーとタイム ピッカーを併用する

    IgxDatePicker と IgxTimePicker を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。

    テンプレート駆動フォームでこれを実現するには、ngModel を使用して両方のコンポーネントを同じ Date オブジェクトにバインドします。

    リアクティブ フォームでは、各コンポーネントの valueChange イベントを処理し、他のコンポーネントの値を更新できます。

    日付ピッカーとタイム ピッカーを併用する

    IgxDatePicker と IgxTimePicker を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。

    テンプレート駆動フォームでこれを実現するには、ngModel を使用して両方のコンポーネントを同じ Date オブジェクトにバインドします。

    リアクティブ フォームでは、各コンポーネントの valueChange イベントを処理し、他のコンポーネントの値を更新できます。

    カレンダー固有の設定

    IgxDatePickerComponentIgxCalendarComponent を使用し、日付ピッカーが公開するプロパティを介してその設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる displayMonthsCount、週の開始日を決定する weekStart、年の各週の番号を表示する showWeekNumbers などが含まれます。

    インターナショナリゼーション

    IgxDatePickerComponent のローカライズは、locale 入力で制御できます。さらに、IgxCalendarComponent によって提供される igxCalendarHeaderigxCalendarSubheader テンプレートを使用して、ヘッダーとサブヘッダーの外観を指定できます。このテンプレートを使用する方法の詳細については、IgxCalendarComponent トピックを参照してください。

    以下は日本ロケール定義を持つ日付ピッカーです。

    <igx-date-picker locale="ja-JP" [value]="date">
      <ng-template igxCalendarHeader let-format>
        {{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }}
      </ng-template>
      <ng-template igxCalendarSubheader let-format>
        <span (click)="format.yearView()">{{ format.year.combined }}</span>
        <span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
      </ng-template>
    </igx-date-picker>
    

    スタイル設定

    日付ピッカーのスタイル設定には、すべてのテーマ関数とコンポーネント mixins が存在する index ファイルをインポートする必要があります。

    @use "igniteui-angular/theming" as *;
    
    // 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    

    日付ピッカーはカレンダーのテーマを使用するので、igx-calendar-theme を拡張する新しいテーマを作成し、そのパラメーターを使用して日付ピッカーの項目をスタイル設定します。

    $custom-datepicker-theme: igx-calendar-theme(
        $header-background: #345779,
        $content-background: #fdfdfd,
        $header-text-color: #ffffff,
        $date-current-text-color: #2dabe8,
        $picker-arrow-color: #2dabe8,
        $date-selected-text-color: #fdfdfd,
        $date-current-bg-color: #fdfdfd,
        $picker-arrow-hover-color: #345779,
        $year-current-text-color: #2dabe8,
        $year-hover-text-color: #2dabe8,
        $month-current-text-color: #2dabe8,
        $month-hover-text-color: #2dabe8,
        $picker-text-color: #2dabe8,
        $picker-text-hover-color: #345779,
    );
    

    CSS 変数の使用

    最後に日付ピッカーのカスタム テーマを設定します。

    @include igx-css-vars($custom-datepicker-theme);
    

    テーマ オーバーライドの使用

    Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化にペネトレーションする必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

    :host {
       ::ng-deep {
           @include igx-calendar($custom-datepicker-theme);
       }
    }
    

    API リファレンス

    テーマの依存関係

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。