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 スタイル
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。