Web Components 日付選択の概要
日付選択コンポーネントは、ドロップダウン カレンダー UI を使用して日、月、年を直感的に選択できます。これは、アプリケーション ユーザーが特定の日付を選択する必要があり、複数のエディターを組み合わせて日付範囲 UI を作成する場合に便利です。
使用方法
Web Components 日付選択エディター コンポーネントは、デフォルトでは、テキスト領域、カレンダー ドロップダウン ボタン、およびクリア ボタンの 3 つの構成されます。これらの領域について以下に説明します。
テキスト領域: エディターの
Value
プロパティに保存されている選択した日付を表示します。カレンダー: カレンダー ボタンをクリックすると、日付選択のカレンダー ドロップダウンが開きます。カレンダーが開き、現在選択されている
Value
の月が表示されます。Value
が指定されていない場合、カレンダーは現在の日付に対応する月を表示します。上部の月をクリックすると、月のリストが表示され、年も同様です。月と年の可視化の左右にある矢印ボタンは、表示されている月を時系列で増減します。カレンダー ボタンの色を変更するには、コントロールのIconColor
プロパティを設定します。クリア ボタン: クリア ボタンはカレンダー ボタンのすぐ左にあり、X で表示されます。クリックすると、日付選択の
Value
をクリアします。クリア ボタンの表示/非表示は、日付選択のShowClearButton
プロパティを設定して切り替えることができます。
ユーザーは、コントロールのさまざまなテキスト プロパティを使用して日付選択のフォントをカスタマイズできます。使用できるプロパティは TextColor
、TextFontFamily
、TextFontSize
、TextFontStyle
、および TextFontWeight
です。
Web Components 日付選択の例
依存関係
日付選択コンポーネントをインストールするときに core と input のパッケージもインストールする必要があります。
npm install --save igniteui-webcomponents-core npm install --save igniteui-webcomponents-inputs
モジュールの要件
日付選択コンポーネントを使用するには、以下のモジュールを登録する必要があります。
import { IgcDatePickerModule } from 'igniteui-webcomponents-inputs';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(IgcDatePickerModule);
コード スニペット
以下のコードは、DatePicker
コンポーネントの値を追加および設定する方法を示します。
<igc-date-picker id="datePicker" height="50px" width="220px">
</igc-date-picker>
constructor() {
let datePicker = document.getElementById("datePicker") as IgcDatePickerComponent;
this.datePicker.value = new Date(Date.now());
}