Date Picker

Ignite UI for Angular Date Picker コンポーネントは、単一の日付選択が可能な月表示カレンダーまたはポップアップ カレンダーを表示します。ロケールおよびカスタム日付書式設定のサポートやコンポーネントに [今日] および [キャンセル] ボタンも表示できます。

Date Picker デモ

Warning

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、すべての必要な依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。「インストール」のトピックで手順を参照できます。

使用方法

IgxDatePickerComponent を使用してカレンダーから日付を選択できます。ピッカーは内部で IgxCalendarComponent をカレンダーとして使用します。Ignite UI for Angular Date Picker を初期化する前に、IgxDatePickerModuleapp.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxDatePickerModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxDatePickerModule],
    ...
})
export class AppModule {}

デートピッカーの追加は、以下のコードを使用してください。

<!-- date-picker-sample.component.html -->

<igx-date-picker></igx-date-picker>

以下は結果です。

日付の設定

IgxDatePickerComponent に日付を設定するには、value 入力を設定します。日付を追加します。

// date-picker-sample.component.ts

public date: Date = new Date(Date.now());

テンプレートで value 入力を使用します。

<!-- date-picker-sample.component.html -->

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

以下は結果です。

Two-way データ バインディングを作成するには、以下のように ngModel を設定します。

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

ボタンの追加

IgxDatePickerComponent は、カレンダーで今日を選択する ‘今日’ ボタンをサポートします。'キャンセル 'ボタンも有効にできます。

Note: Configuring the 'Today' and 'Cancel' buttons is applicable only to the read-only mode date picker.

ボタンを有効にするには、 cancelButtonLabeltodayButtonLabel 入力を使用してボタン テキストを設定します。

<!-- date-picker-sample.component.html -->

<igx-date-picker cancelButtonLabel="cancel" todayButtonLabel="today" [(ngModel)]="date"></igx-date-picker>

ボタンが表示されるサンプル:

カスタム書式設定

デフォルトで表示する値は指定した locale に基づいて書式設定され、カスタム フォーマッタも使用できます。フォーマッタ関数の追加:

public date: Date = new Date(Date.now());

private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" });
private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" });

public formatter = (date: Date) => {
  return `You selected ${this.dayFormatter.format(date)}, ${date.getDate()} ${this.monthFormatter.format(date)}, ${date.getFullYear()}`;
}

次に IgxDatePickerComponentformatter 入力を使用します。

<!-- date-picker-sample.component.html -->

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

書式設定した日付を表示するサンプル:

編集モード

デフォルトでデート ピッカーは読み取り専用モードで表示されます。編集可能なモードに変更するには、mode 入力を editable に設定します。

<!-- date-picker-sample.component.html -->

<igx-date-picker mode="editable"></igx-date-picker>

デートピッカーは、以下のデートピッカー入力を設定して更にカスタマイズできます。

入力 タイプ 説明
format string 日付の表示書式を設定します。有効な記号と含む書式を受け付けます。詳細については、DatePipe をご覧ください。shortDate, mediumDate, longDate and fullDate など定義済みの書式オプションもサポートされます。
mask string 日付エディター マスクの設定d、M、y 記号の数値表記や dd-MM-y などの任意のセパレーターの組み合わせを受け付けます。エディターは MMM、MMMM、MMMMM の文字表記を受け取りません。有効なマスクの日の部分は d と dd、月部分は M と MM、年部分は y、yy、yyyy となります。
isSpinLoop boolean 継続するスピン ループを設定します。false に設定すると、日付部分のスピンが停止します。デフォルトでスピン ループは無限ループです。
locale string ロケール プロパティを設定する場合に Angular に含まれるロケールが en-US のみであることに注意してください。その他の日付をローカライズするためには対応するロケール データをインポートする必要があります。詳細については、I18n ガイドをご覧ください。

注: formatter および format 両方の入力が設定されている場合、編集可能なデートピッカーは formatter の入力を無視します。

編集可能なデートピッカーは、無効な日付と無効な入力を処理するために次のアウトプットを提供します。

アウトプット 引数 説明
onDisabledDate IDatePickerDisabledDateEventArgs デートピッカーでユーザーが無効な日付を入力またはスピンした場合に発生します。
onValidationFailed IDatePickerValidationFailedEventArgs デートピッカーでユーザー無効なな日付を入力またはスピンした場合に発生します。
キーボード ナビゲーション
  • デートピッカー ドロップダウンを開く:
    • SPACE
    • ALT + DOWN
  • デートピッカー ドロップダウンを閉じる:
    • ESC
    • ALT + UP
  • 日付部分のインクリメント:
    • 日付部分にフォーカス + UP
  • 日付部分のデクリメント:
    • 日付部分にフォーカス + DOWN

入力グループのテンプレート化

Date Picker の入力グループをカスタマイズできます。そのために IgxDatePickerTemplateディレクティブでデートピッカーに入れ子になった ng-template をデコレートする必要があります。ng-template コンテキストは、以下のメンバーを公開しています。 コンテキストは以下のメンバーを公開します。

メンバー 説明
openDialog 日付の選択 ダイアログを開くために使用できるメソッド。
disabled デートピッカーの無効状態を制御します。
disabledDates 無効な日付を含みます。
displayData デートピッカーが読み取り専用モード時に書式設定付きの値を含みます。
format デートピッカーの編集モード時に表示書式を含みます。
isSpinLoop デートピッカーの編集モード時に連続スピンループを制御します。
label 入力テキストを含みます。
labelVisibility 入力ラベル テキストの表示を制御します。
locale 日付の書式設定と表示のためのロケールを含みます。
mask デートピッカーの編集モード時にマスクを含みます。
mode デートピッカー モードを含みます。
specialDates 特定の日付を含みます。
value 実数値を含みます。

ng-template 要素で変数を宣言して使用することができます。

以下の例では、デフォルトのラベル "Date" を変更して 2 つ目のアイコンをサフィックスとして追加します。以下は入力グループで実際のデートピッカーの値を表示するラベルを設定します。

<igx-date-picker [value]="date">
    <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value" let-displayData="displayData">
        <igx-input-group (click)="openDialog()">
            <igx-prefix>
                <igx-icon>favorite</igx-icon>
            </igx-prefix>
            <label igxLabel>My Custom Date<</label>
            <input igxInput [value]="displayData" />
            <igx-suffix>
                <igx-icon>today</igx-icon>
            </igx-suffix>
        </igx-input-group>
        <label>{{value}}</label>
    </ng-template>
</igx-date-picker>
public date: Date = new Date(Date.now());

再テンプレートした入力グループ:

Templating Dropdown Mode Date Picker

All the information mentioned in the Templating Dialog Mode Date Picker section can be applied when re-templating a dropdown date picker. The only requirement is that an HTML element should be marked with dropDownTarget id to be used as a target for the calendar dropdown.

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

IgxDatePickerComponent はロケールをサポートします。locale 入力を使用して設定できます。ヘッダー (igxCalendarHeader) およびサブヘッダー (igxCalendarSubheader) の IgxCalendarComponent テンプレートを使用してヘッダーおよびサブヘッダーの外観を設定できます。このテンプレートを使用する方法の詳細については、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 class="date__el" (click)="format.yearView()">{{ format.year.combined }}</span>
    <span class="date__el" (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
  </ng-template>
</igx-date-picker>
Note

Internet Explorer および Edge ブラウザーの場合、両方のブラウザーがこの機能を提供する Intl API を実装しないため、日付部分は空の文字列です。 (formatToParts を参照)

このブラウザーをサポートするには、ngIf ディレクティブを使用する代わりのテンプレートを使用します。

<!-- app.component.html-->
<igx-date-picker id="date-picker" locale="ja-JP" [value]="date" #component>
    <div *ngIf="formatParts; else parseTemplate">
        <ng-template igxCalendarHeader let-format>
            {{ format.month.combined | titlecase }} {{ format.day.combined }} {{ format.weekday.combined }}
        </ng-template>
        <ng-template igxCalendarSubheader let-format>
            <span class="date__el" (click)="format.yearView()">{{ format.year.combined }}</span>
            <span class="date__el" (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
        </ng-template>
    </div>

    <!-- Parse template for browsers not supporting Intl-->
    <ng-template #parseTemplate>
        <ng-template igxCalendarHeader let-format>
            {{ getDatePart(format, component, 'month') | titlecase }} {{ getDatePart(format, component, 'day') }} {{ getDatePart(format, component, 'weekday') }}
        </ng-template>
        <ng-template igxCalendarSubheader let-format>
            <span class="date__el" (click)="format.yearView()">{{ getDatePart(format, component, 'year') }}</span>
            <span class="date__el" (click)="format.monthView()">{{ getDatePart(format, component, 'month') }}</span>
        </ng-template>
    </ng-template>
</igx-date-picker>

ngIf は、使用するテンプレートを制御するために formatParts 式の値を評価します。代わりの #parseTemplate テンプレートを参照します。{} にある式は評価された値を返す getDatePart メソッドを起動します。この場合、書式設定された日付部分 (年、曜日、月など) を返します。getDatePart に渡されたパラメーターは、書式設定が IgxDatePickerComponent の locale および format オプションに基づいて設定されるために必要です。

// app.component.ts
public intlDateTimeFormat = new Intl.DateTimeFormat() as any;
public formatParts: boolean = this.intlDateTimeFormat.formatToParts;

public getDatePart(val: any, component: any, datePart: string) {
    const date = val.date as Date;
    const locale = component.locale;
    const formatOptions: Intl.DateTimeFormatOptions = {};
    formatOptions[datePart] = component.formatOptions[datePart];

    return date.toLocaleString(locale, formatOptions);

    // instead of toLocaleString we can use Intl.DateTimeFormat.format as well:
    // const partFormatter = new Intl.DateTimeFormat(locale, formatOptions);
    // return partFormatter.format(date);
}

以下は結果です。

API

追加のリソース

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