Ignite UI for Angular 9.1.2 バージョン時点での情報に基づいています。
Ignite UI for Angular 9.1で、INPUT要素にIgxDateTimEditorディレクティブを指定できるようになりました。
入力形式を設定するには、IgxDateTimeEditorディレクティブに文字列として渡します。
// app.module.ts // ... (省略) ... // IgxDateTimeEditorModuleとIgxInputGroupModuleをインポートをする。 import { IgxDateTimeEditorModule, IgxInputGroupModule } from 'igniteui-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ // ... (省略) ... IgxDateTimeEditorModule, IgxInputGroupModule, ], // ... (省略) ... }) // ... (省略) ...
// app.component.ts // ... (省略) ... export class AppComponent { // ... (省略) ... public date = new Date(); // ... (省略) ... }
<!-- app.component.html --> <igx-input-group> <!-- INPUT要素にIgxDateTimeEditorディレクティブを指定し、入力形式を渡す --> <input type="text" igxInput [igxDateTimeEditor]="'yyyy/MM/dd HH:mm:ss'" [value]="date" /> </igx-input-group>
実行結果
サンプル
リファレンス
- 「Date Time Editor ディレクティブ」