Angular Date Time Editor (日時エディター) ディレクティブ

Ignite UI for Angular Date Time Editor ディレクティブでは、選択された入力要素で日付と時刻を設定および編集できます。ユーザーは、編集可能なマスク入力によって日付または時間部分を編集できます。さらに、検証に最小値と最大値だけでなく、希望の表示形式および入力形式の設定を指定できます。

Angular Date Time Editor の例

Ignite UI for Angular Date Time Editor ディレクティブを使用した作業の開始

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

ng add igniteui-angular

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

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

// app.module.ts

...
import { IgxDateTimeEditorModule } from 'igniteui-angular';
// import { IgxDateTimeEditorModule } from '@infragistics/igniteui-angular'; for licensed package

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

あるいは、16.0.0 以降、IgxDateTimeEditorDirective をスタンドアロンの依存関係としてインポートできます。

// home.component.ts

import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date" />
    </igx-input-group>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES]
})
export class HomeComponent {
    public date = new Date();
}

Ignite UI for Angular Date Time Editor モジュールまたはディレクティブをインポートしたので、igxDateTimeEditor ディレクティブの使用を開始できます。

Ignite UI for Angular Date Time Editor ディレクティブの使用

input 要素を日時エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を igx-input-group にラップします。これにより、igxInput、igxLabel、igx-prefix、igx-suffix、igx-hint ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。

バインディング

以下は、Date オブジェクトを value として設定する基本的な構成シナリオです。

public date = new Date();

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [value]="date" />
</igx-input-group>

双方向のデータバインディングを作成するには、ngModel を設定します。

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
</igx-input-group>

ISO 文字列へのバインド

IgxDateTimeEditorDirective は、ISO 8601 文字列を受け入れます。

文字列は、YYYY-MM-DDTHH:mm:ss.sssZ の形式の完全な ISO 文字列にすることも、日付のみと時刻のみの部分に分割することもできます。

日付のみ

日付のみの文字列がディレクティブにバインドされている場合は、YYYY-MM-DD の形式に従う必要があります。これは、文字列値をディレクティブにバインドする場合にのみ適用されます。inputFormat は、エディターで値を入力するときに引き続き使用され、同じ形式である必要はありません。さらに、日付のみの文字列をバインドする場合、ディレクティブは時刻を T00:00:00 に強制することにより、時刻のずれを防ぎます。

時刻のみ

時刻のみの文字列は通常、ECMA 仕様では定義されていませんが、時刻のみのソリューションを必要とするシナリオにディレクティブを統合できるようにするために、24 時間形式 (HH:mm:ss) をサポートしています。12 時間形式はサポートされていません。これはバインドされた値のみに適用されることにも注意してください。

完全な ISO 文字列

完全な ISO 文字列がバインドされている場合、ディレクティブは Date.parse に必要なすべての要素が指定されている場合にのみそれを解析します。

InvalidDate を含むすべての falsy 値は null として解析されます。不完全な日付のみ、時刻のみ、または完全な ISO 文字列は InvalidDate として解析されます。

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

Date Time Editor ディレクティブには直感的なキーボード ナビゲーション機能があり、マウス操作なしでさまざまな DatePart を移動、インクリメント、デクリメントなどができます。

• Ctrl / Cmd + 左矢印 / 右矢印 - 日付セクション間を移動します。Ctrl / Cmd + 右矢印でセクションの最後に移動します。既に最後にある場合、次のセクション (存在する場合) の最後に移動します。反対方向も同様です。

• 上矢印 / 下矢印 - 日付部分を増減します。関連する spinLoop を参照してください。

• Ctrl / Cmd + ; - エディターの現在の日時を設定します。

例

表示および入力形式

IgxDateTimeEditor は、さまざまな表示および入力の形式をサポートします。

Angular の DatePipe を使用しており、shortDate や longDate などの事前定義された形式オプションをサポートできます。また、DatePipe でサポートされている文字を使用して構築されたフォーマット文字列を受け入れることもできます。例えば、EE/MM/yyyy です。shortDate、longDate などの形式は、displayFormat としてのみ使用できることに注意してください。また、displayFormat が指定されていない場合、エディターは inputFormat を displayFormat として使用します。

特定の入力形式を設定するには、文字列として IgxDateTimeEditor ディレクティブに渡します。これにより、予期されるユーザー入力形式とエディターのマスクの両方が設定されます。さらに、inputFormat はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。

<igx-input-group>
    <input type="text" igxInput [displayFormat]="'shortDate'" [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="date"/>
</igx-input-group>

次の表は、ディレクティブの inputFormat でサポートされている形式を示しています:

形式	説明
d	日付。編集中は先行ゼロで強制されます。
dd	先行ゼロが明示的に設定された日付。
M	月。編集中は先行ゼロで強制されます。
MM	先行ゼロが明示的に設定されている月。
yy	短い年形式。
yyyy	完全な年形式。
h	12 時間形式の時間。編集中は先行ゼロで強制されます。
hh	明示的に先行ゼロが設定された 12 時間形式の時間。
H	24 時間形式の時間。編集中は先行ゼロで強制されます。
HH	明示的に先行ゼロが設定された 24 時間形式の時間。
m	分。編集中に先行ゼロで強制されます。
mm	先行ゼロが明示的に設定された分。
tt	12 時間形式の AM/PM セクション。

Note

IgxDateTimeEditorDirective が IME 入力をサポートします。アジア言語の入力を入力すると、コントロールは入力メソッドの構成と候補リストをコントロールの編集領域に直接表示し、構成が終了するとすぐに周囲のテキストを再フローします。

最小値と最大値

minValue および maxValue プロパティを指定して、ngModel の入力を制限し、有効性を制御できます。

public minDate = new Date(2020, 1, 15);
public maxDate = new Date(2020, 11, 1);

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" [(ngModel)]="date"/>
</igx-input-group>

minValue および minValue 入力は、タイプ string にすることもできます。 ISO 文字列へのバインドを参照してください。

増加および減少

igxDateTimeEditor ディレクティブは、公開 increment および decrement メソッドを公開します。これらは、現在設定されている日時の特定の DatePart を増加または減少し、いくつかの方法で使用できます。

最初のシナリオでは、特定の DatePart がメソッドに渡されない場合、デフォルトの DatePart は指定された inputFormat と内部ディレクティブの実装に基づいて増加または減少します。2 番目のシナリオでは、さまざまな要件に適合する可能性があるため、操作する DatePart を明示的に指定できます。 また、どちらのメソッドも、増加/減少手順を設定するために使用できるタイプ number のオプションの delta パラメーターを受け入れます。

以下のサンプルで両方を比較できます。

さらに、spinDelta はタイプ DatePartDeltas の入力プロパティであり、各日時セグメントに異なるデルタを適用するために使用できます。これは、キーボードで回転するとき、および increment メソッドと decrement メソッドで回転するときに適用されます。ただし、spinDelta よりも優先されるため delta パラメーターが指定されていない場合に限ります。

Angular フォーム

Date Time Editor ディレクティブは、コア FormsModule NgModel と ReactiveFormsModule (FormControl、FormGroup など) のすべてのフォーム ディレクティブをサポートします。これには、フォーム Validators機能も含まれます。次の例は、テンプレート駆動型フォームで required バリデータを使用する方法を示しています。

Note

必要に応じて、validationFailed イベントを処理し、利用可能な引数の newValue プロパティを変更して有効な状態に戻すことができます。

テンプレート駆動フォームの例:

<form>
    <igx-input-group>
        <input igxInput type="text" [(ngModel)]="date" name="form" required
            (valueChanged)="onValueChanged($event)" (validationFailed)="onValidationFailed($event)"
            [igxDateTimeEditor]="'dd/MM/yyyy'" [minValue]="minDate" [maxValue]="maxDate" [isSpinLoop]="false" />
    </igx-input-group>
</form>
<div class="divider--half"></div>

テキスト選択

igxTextSelection を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。Label および Input で igxTextSelection の詳細情報を参照してください。

<igx-input-group>
    <input igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [igxTextSelection]="true"/>
</igx-input-group>

Note

コンポーネントが正しく動作するためには、igxDateTimeEditor ディレクティブの後に igxTextSelection を設定することが重要です。これは、両方のディレクティブが入力 focus イベントで動作するため、マスクが設定された後にテキスト選択が行われるからです。

スタイル設定

詳細については、Input Group スタイル ガイドを参照してください。

API リファレンス

• IgxDateTimeEditorDirective
• IgxHintDirective
• IgxInputDirective
• IgxInputGroupComponent
• IgxInputGroupComponent スタイル

その他のリソース

関連トピック:

• Mask
• Label および Input
• リアクティブ フォームの統合

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

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