Angular Datepicker (日付ピッカー) コンポーネントの概要
Angular DatePicker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Angular の DatePicker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。検証を追加するための通常の min、max、および required プロパティがあります。
Ignite UI for Angular DatePicker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。Angular DatePicker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。
Angular Datepicker の例
以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Angular DatePicker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。
Ignite UI for Angular Datepicker を使用した作業の開始
Ignite UI for Angular Datepicker コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
Ignite UI for Angular については、「はじめに」トピックをご覧ください。
次に、app.module.ts ファイルに IgxDatePickerModule
をインポートします。
Note
ピッカーが IgxCalendarComponent を使用し、タッチ操作のために BrowserAnimationsModule と HammerModule (オプション) に依存関係があり、これらもモジュールに追加する必要があります。
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxDatePickerModule } from 'igniteui-angular';
// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxDatePickerModule, BrowserAnimationsModule, HammerModule],
...
})
export class AppModule {}
あるいは、16.0.0
以降、IgxDatePickerComponent
をスタンドアロンの依存関係としてインポートすることも、IGX_DATE_PICKER_DIRECTIVES
トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。
// home.component.ts
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DATE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-date-picker>
<label igxLabel>Date</label>
</igx-date-picker>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_PICKER_DIRECTIVES]
/* or imports: [BrowserAnimationsModule, HammerModule, IgxDatePickerComponent, IgxLabelDirective] */
})
export class HomeComponent {}
Ignite UI for Angular Datepicker モジュールまたはディレクティブをインポートしたので、igx-date-picker
コンポーネントの使用を開始できます。
Angular Datepicker コンポーネントの使用
Datepicker の表示
デフォルトの dropdown
状態の Datepicker をインスタンス化するには、以下のコードを使用してください。
<igx-date-picker>
<label igxLabel>Date</label>
</igx-date-picker>
オプション
IgxDatePickerComponent
は date
または string
にバインドできます。
<igx-date-picker [value]="date"></igx-date-picker>
public date = new Date(2000, 0, 1);
文字列がピッカーにバインドされている場合は、ISO 8601
形式の日付のみの文字列である必要があります。
<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
がサポートする子コンポーネントの投影を許可します。それは、igxLabel
、igx-hint / IgxHint
、igx-prefix / igxPrefix
、igx-suffix / igxSuffix
です。詳細については、Label および Input トピックを参照してください。
<igx-date-picker #datePicker>
<igx-icon igxSuffix (click)="datePicker.open()">keyboard_arrow_down</igx-icon>
</igx-date-picker>
上記のスニペットでは、入力の最後、デフォルトのクリア アイコンの直後に追加のトグル アイコンが追加されます。プレフィックスとサフィックスを次々に積み重ねることができるため、これによってデフォルトのトグル アイコンが削除されることはありません。
トグル アイコンとクリア アイコンのカスタマイズ
IgxDatePickerComponent
は IgxPickerToggleComponent
と IgxPickerClearComponent
で構成できます。これらを使用すると、独自のクリック ハンドラーを追加しなくても、トグル アイコンとクリア アイコンを変更できます。
<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 つの方法で変更できます:
- ボタンのテキストは、
todayButtonLabel
とcancelButtonLabel
入力プロパティを使用して変更できます:
<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 + ↑ | カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。 |
IgxDatePickerComponent
は IgxDateTimeEditorDirective
を使用するため、キーボード ナビゲーションを継承します。
コード例
ダイアログ モード
IgxDatePickerComponent
は、dialog
モードもサポートしています:
<igx-date-picker [mode]="'dialog'"></igx-date-picker>
表示および入力形式
inputFormat
および displayFormat
は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。inputFormat
プロパティは、ピッカーが dropdown
モードのときに使用され、入力の編集可能なマスクとそのプレースホルダー (何も設定されていない場合) を管理します。さらに、inputFormat
はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。
注意すべき点は、Ignite UI の Angular DatePicker Component が date
と month
の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、d/M/yy
は dd/MM/yy
になります。これは編集中にのみ適用されます。
一方、displayFormat
は Angular の DatePipe
を使用し、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。displayFormat
が指定されていない場合、ピッカーは inputFormat
を displayFormat
として使用します。
これらの詳細については、IgxDateTimeEditor
の例のセクションを参照してください。
Note
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
は、コア FormsModule、NgModel、および ReactiveFormsModule (FormControl
、FormGroup
など) からのすべてのディレクティブをサポートします。これには、フォーム バリデータ機能も含まれます。さらに、コンポーネントの minValue
プロパティと maxValue
プロパティはフォーム バリデータとして機能します。
リアクティブ フォームの統合トピックにアクセスすると、IgxDatePickerComponent
をリアクティブ フォームで確認できます。
日付ピッカーとタイム ピッカーを併用する
IgxDatePicker と IgxTimePicker
を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
テンプレート駆動フォームでこれを実現するには、ngModel
を使用して両方のコンポーネントを同じ Date オブジェクトにバインドします。
リアクティブ フォームでは、各コンポーネントの valueChange
イベントを処理し、他のコンポーネントの値を更新できます。
カレンダー固有の設定
IgxDatePickerComponent
は IgxCalendarComponent
を使用し、日付ピッカーが公開するプロパティを介してその設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる displayMonthsCount
、週の開始日を決定する weekStart
、年の各週の番号を表示する showWeekNumbers
などが含まれます。
インターナショナリゼーション
IgxDatePickerComponent
のローカライズは、locale
入力で制御できます。さらに、IgxCalendarComponent
によって提供される igxCalendarHeader
と igxCalendarSubheader
テンプレートを使用して、ヘッダーとサブヘッダーの外観を指定できます。このテンプレートを使用する方法の詳細については、IgxCalendarComponent トピックを参照してください。
以下は日本ロケール定義を持つ Angular DatePicker です。
<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>
スタイル設定
日付ピッカーのスタイル設定には、すべてのテーマ関数とコンポーネント ミックスインが存在する index
ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
Angular DatePicker はカレンダーのテーマを使用するため、calendar-theme
を拡張する新しいテーマを作成し、そのパラメーターを使用して日付ピッカーの項目をスタイル設定します。
$custom-datepicker-theme: 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 変数の使用
最後に Angular DatePicker のカスタム テーマを設定します。
@include css-vars($custom-datepicker-theme);
テーマ オーバーライドの使用
Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化に解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep
の前に :host
セレクターを含めるようにしてください。
:host {
::ng-deep {
@include calendar($custom-datepicker-theme);
}
}
API リファレンス
- IgxDatePickerComponent
- IgxDateTimeEditorDirective
- IgxCalendarComponent
- IgxCalendarComponent スタイル
- IgxOverlay スタイル
- IgxInputGroupComponent
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。