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 {}

テンプレートに日付ピッカーを追加します。

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

以下は結果です。

日付の設定

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

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

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

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

以下は結果です。

以下は、ngModule で TwoWay データ バインディングを使用する方法です。

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

ボタンの追加

IgxDatePickerComponent は、カレンダーからの現在の日を選択する [今日] ボタンをサポートします。[キャンセル] ボタンも有効にできます。テンプレートでボタンを有効にするには、以下のコードを使用します。

<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 入力を使用します。

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

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

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

Date Picker の入力グループをカスタマイズできます。デートピッカー内にネストした ng-template を IgxDatePickerTemplateディレクティブでデコレートする必要があります。ng-template コンテキストは、次のメンバーを公開します。openDialog メソッドはデートピッカーダイアログに使用できます。displayDataプロパティは書式設定の値を含みます。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());

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

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

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

追加のリソース

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