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/date-time-editor';
// import { IgxDateTimeEditorModule } from '@infragistics/igniteui-angular'; for licensed package

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

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

// home.component.ts

import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// 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 を含むすべての false 値は null として解析されます。不完全な日付のみ、時刻のみ、または完全な ISO 文字列は InvalidDate として解析されます。

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

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

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

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

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

例

表示および入力形式

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

Angular の DatePipe を使用しており、shortDate や longDate などの事前定義された形式オプションをサポートできます。また、DatePipe でサポートされている文字を使用して構築されたフォーマット文字列を受け入れることもできます。例えば、EE/MM/yyyy です。shortDate、longDate などの形式は、displayFormat としてのみ使用できることに注意してください。また、displayFormat が指定されていない場合、エディターは inputFormat を displayFormat として使用します。 あるいは、inputFormat プロパティが設定されていない場合、入力形式は displayFormat から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。

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

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

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

最小値と最大値

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 パラメーターが指定されていない場合に限ります。

Additionally, spinDelta is an input property of type DatePartDeltas and it can be used to apply a different delta to each date time segment. It will be applied when spinning with the keyboard, as well as when spinning with the increment and decrement methods, as long as they don’t have the delta parameter provided since it will take precedence over spinDelta.

Angular フォーム

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

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

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

テキスト選択

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

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

スタイル設定

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

API リファレンス

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

その他のリソース

関連トピック:

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

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

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

• Ignite UI for Angular GitHub (英語)

• Ignite UI for Angular Forums

• Ignite UI for Angular GitHub