Date Time Editor ディレクティブ

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

Angular Date Time Editor の例

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

使用方法

Ignite UI for Angular Date Time ディレクティブを使用するにはまず初めに IgxDateTimeEditorModule を app.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxDateTimeEditorModule } from 'igniteui-angular';

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

input 要素を日時エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を入力グループにラップします。これにより、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>

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

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

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

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

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

例

表示および入力形式

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

表示には、Angular の DatePipe を使用します。これにより、shortDate や longDate などの定義済みの形式オプションをサポートできます。DatePipe でサポートされる文字 (EE/MM/yyyy など) を使用して構成された書式文字列を受け入れることもできます。注: shortDate、longDate などの形式は displayFormat としてのみ使用できます。

特定の入力形式を設定するには、文字列として IgxDateTimeEditor ディレクティブに渡します。これにより、予期されるユーザー入力形式とエディターのマスクの両方が設定されます。 

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

最小値と最大値

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>

増加および減少

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

最初のシナリオでは、特定の DatePart がメソッドに渡されない場合、指定した inputFormat および内部ディレクティブの実装に基づいてデフォルトの DatePart が増減します。 2 番目のシナリオでは、さまざまな要件を満たすために操作する DatePart を明示的に指定できます。 以下のサンプルで両方を比較できます。

Angular フォーム

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

注: 必要に応じて、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>

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

スタイル設定

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

API リファレンス

その他のリソース

関連トピック:

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