Angular Date Picker (日付ピッカー) コンポーネントの概要

Angular Date Picker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Angular の Date Picker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。検証を追加するための通常の min、max、および required プロパティがあります。

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

Angular Date Picker の例

以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Angular Date Picker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDatePickerModule } from "igniteui-angular";
import { DatepickerSample1Component } from "./datepicker-sample-1/datepicker-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DatepickerSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDatePickerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
  selector: 'app-datepicker-sample-1',
  styleUrls: ['./datepicker-sample-1.component.scss'],
  templateUrl: './datepicker-sample-1.component.html'
})
export class DatepickerSample1Component {
    public date = new Date();
}
tsコピー

<div class="date-picker-wrapper">
    <igx-date-picker [(ngModel)]="date">
        <label igxLabel>Date</label>
    </igx-date-picker>
</div>
htmlコピー

.datе-picker-wrapper {
    padding: 1rem;
    max-width: 600px;
}
scssコピー

Edit in: CodesandboxStackBlitz

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Date Picker を使用した作業の開始

Ignite UI for Angular Date Picker コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxDatePickerModule をインポートします。

ピッカーが 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 {}
typescript

あるいは、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 {}
typescript

Ignite UI for Angular Date Picker モジュールまたはディレクティブをインポートしたので、igx-date-picker コンポーネントの使用を開始できます。

Angular Date Picker コンポーネントの使用

Date Picker の表示

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

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

オプション

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

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

public date = new Date(2000, 0, 1);
typescript

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

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

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

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

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

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

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

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

<form [formGroup]="form">
    <igx-date-picker formControlName="datePicker"></igx-date-picker>
</form>
html

export class SampleFormComponent {
    // ...
    public form: FormGroup;
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            datePicker: ['', Validators.required]
        });
    }
}
typescript

ピッカーは常に 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>
html

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

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

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>
html

カスタム動作ボタン

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

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

<igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>
html

• ボタン全体は、igxPickerActions ディレクティブを使用してテンプレート化できます。これを使用すると、日付ピッカーの calendar とそのすべてのメンバーにアクセスできます。

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

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

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

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

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

コード例

ダイアログ モード

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDatePickerModule } from "igniteui-angular";
import { DatepickerSample2Component } from "./datepicker-sample-2/datepicker-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DatepickerSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDatePickerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
  selector: 'app-datepicker-sample-2',
  styleUrls: ['./datepicker-sample-2.component.scss'],
  templateUrl: './datepicker-sample-2.component.html'
})
export class DatepickerSample2Component {
  public date: Date = new Date();
}
tsコピー

<div class="date-picker-wrapper">
    <igx-date-picker [(value)]="date" mode="dialog">
        <label igxLabel>Date</label>
    </igx-date-picker>
</div>
htmlコピー

.date-picker-wrapper {
    padding: 1rem;
    max-width: 600px;
}
scssコピー

Edit in: CodesandboxStackBlitz

表示および入力形式

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

注意すべき点は、Ignite UI の Angular Date Picker Component が date と month の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、d/M/yy は dd/MM/yy になります。これは編集中にのみ適用されます。

一方、displayFormat は Angular の DatePipe を使用し、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。displayFormat が指定されていない場合、ピッカーは inputFormat を displayFormat として使用します。 あるいは、inputFormat プロパティが設定されていない場合、入力形式は displayFormat から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDatePickerModule } from "igniteui-angular";
import { DatepickerSample3Component } from "./datepicker-sample-3/datepicker-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DatepickerSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDatePickerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-datepicker-sample-3',
    styleUrls: ['./datepicker-sample-3.component.scss'],
    templateUrl: './datepicker-sample-3.component.html'
})
export class DatepickerSample3Component {
    public date = new Date();
}
tsコピー

<div class="date-picker-wrapper">
    <igx-date-picker 
        [(ngModel)]="date" 
        [inputFormat]="'dd/MM/yy'" 
        [displayFormat]="'shortDate'">
    </igx-date-picker>
</div>
htmlコピー

.date-picker-wrapper {
  padding: 1rem;
}
scssコピー

Edit in: CodesandboxStackBlitz

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>
html

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

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

Angular Forms で

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

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

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

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DateTimePickerTDFSampleComponent } from "./scheduling/datepicker/template-driven-form/template-driven-form.component";
import { 
	IgxDatePickerModule,
	IgxTimePickerModule
 } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DateTimePickerTDFSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDatePickerModule,
	IgxTimePickerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-datetimepicker-template-driven-form',
    styleUrls: ['./template-driven-form.component.scss'],
    templateUrl: './template-driven-form.component.html'
})
export class DateTimePickerTDFSampleComponent {
    public date = new Date();
}
tsコピー

<div class="pickers-wrapper">
    <div class="form-group">
        <div class="form-date-picker">
            <igx-date-picker #datePicker name="date-picker" [(ngModel)]="date">
                <label igxLabel>Date</label>
            </igx-date-picker>
        </div>
        <div class="form-time-picker">
            <igx-time-picker name="time-picker" [(ngModel)]="date" [disabled]="datePicker.value ? false : true">
                <label igxLabel>Time</label>
            </igx-time-picker>
        </div>
    </div>
    <p class="text">
        Selected date: {{ date? date.toLocaleString() : null }}
    </p>
</div>
htmlコピー

.pickers-wrapper {
    display: flex;
    flex-direction: column;
}

.form-group {
    display: flex;
    flex: 1;
    width: 400px;
}

.form-date-picker {
    flex: 55%;
}

.form-time-picker {
    flex: 45%;
    margin-left: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DateTimePickerRFSampleComponent } from "./scheduling/datepicker/reactive-form/reactive-form.component";
import { 
	IgxDatePickerModule,
	IgxTimePickerModule
 } from "igniteui-angular";
import { ReactiveFormsModule } from "@angular/forms";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DateTimePickerRFSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDatePickerModule,
	IgxTimePickerModule,
	ReactiveFormsModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-datetimepicker-reactive-form',
    styleUrls: ['./reactive-form.component.scss'],
    templateUrl: './reactive-form.component.html'
})
export class DateTimePickerRFSampleComponent {
    public dateTimeForm: FormGroup;
    public date = new Date(2021, 6, 12, 7, 30, 0);
    public minDate = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate() - 10);
    public maxDate = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate() + 15);
    public minTime = '06:15:30';
    public maxTime = '15:15:30';

    constructor(fb: FormBuilder) {
        this.dateTimeForm = fb.group({
            date: [this.date, Validators.required],
            time: [this.date, Validators.required]
        });
    }
}
tsコピー

<div class="pickers-wrapper">
    <form [formGroup]="dateTimeForm">
        <div class="form-group">
            <div class="form-date-picker">
                <igx-date-picker #datePicker formControlName="date" [value]="date" [minValue]="minDate"
                    [maxValue]="maxDate" (valueChange)="timePicker.value = datePicker.value">
                    <label igxLabel>Date</label>
                </igx-date-picker>
            </div>
            <div class="form-time-picker">
                <igx-time-picker #timePicker formControlName="time" [value]="date" [minValue]="minTime"
                    [maxValue]="maxTime" [disabled]="dateTimeForm.value.date ? false : true"
                    (valueChange)="datePicker.value = timePicker.value">
                    <label igxLabel>Time</label>
                </igx-time-picker>
            </div>
        </div>
    </form>
    <p>
        Date picker: {{ dateTimeForm.value.date? dateTimeForm.value.date.toLocaleString() : null}}<br>
        Time picker: {{ dateTimeForm.value.time? dateTimeForm.value.time.toLocaleString() : null}}<br>
        Form Status: {{ dateTimeForm.status }}
    </p>
</div>
htmlコピー

.pickers-wrapper {
    display: flex;
    flex-direction: column;
}

.form-group {
    display: flex;
    flex: 1;
    width: 400px;
}

.form-date-picker {
    flex: 55%;
}

.form-time-picker {
    flex: 45%;
    margin-left: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

カレンダー固有の設定

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

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

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

以下は日本ロケール定義を持つ Angular Date Picker です。

<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>
html

スタイル設定

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

@use "igniteui-angular/theming" as *;

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

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

$custom-datepicker-theme: calendar-theme(
  $header-background: #345779,
  $content-background: #fdfdfd,
  $header-foreground: #ffffff,
  $date-current-foreground: #2dabe8,
  $navigation-color: #2dabe8,
  $date-selected-foreground: #fdfdfd,
  $date-current-background: #fdfdfd,
  $navigation-hover-color: #345779,
  $ym-current-foreground: #2dabe8,
  $ym-hover-foreground: #2dabe8,
  $picker-foreground: #2dabe8,
  $picker-hover-foreground: #345779,
);
scss

最後に Angular Date Picker のカスタム テーマを設定します。

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

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
  ::ng-deep {
    @include css-vars($custom-datepicker-theme);
  }
}
scss

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxDatePickerModule,
	IgxIconModule
 } from "igniteui-angular";
import { DatepickerStylingSampleComponent } from "./scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DatepickerStylingSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDatePickerModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ElementRef } from '@angular/core';
import { IgxOverlayService } from 'igniteui-angular';

@Component({
  selector: 'app-datepicker-sample-1',
  styleUrls: ['./datepicker-styling-sample.component.scss'],
  templateUrl: './datepicker-styling-sample.component.html'
})
export class DatepickerStylingSampleComponent {
    constructor(public element: ElementRef, private overlayService: IgxOverlayService) { }
 }
tsコピー

<div class="date-picker-wrapper">
    <igx-date-picker [overlaySettings]="{ outlet: element }" mode="dialog">
        <label igxLabel>Date</label>
    </igx-date-picker>
</div>
htmlコピー

@use '../../../../variables' as *;

.date-picker-wrapper {
    padding: 1rem;
    max-width: 600px;
}

$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,
);

:host {
    @include css-vars($custom-datepicker-theme);
}

scssコピー

Edit in: CodesandboxStackBlitz

API リファレンス

• IgxDatePickerComponent
• IgxDateTimeEditorDirective
• IgxCalendarComponent
• IgxCalendarComponent スタイル
• IgxOverlay スタイル
• IgxInputGroupComponent

テーマの依存関係

• IgxCalendar テーマ
• IgxOverlay テーマ
• IgxIcon テーマ
• IgxButton テーマ
• IgxInputGroup テーマ
• IgxDropDown テーマ

その他のリソース

• Time Picker
• Date Time Editor
• Date Range Picker
• リアクティブ フォームの統合

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)