Web Components 日付選択の概要
日付選択コンポーネントは、ドロップダウン カレンダー UI を使用して日、月、年を直感的に選択できます。これは、アプリケーション ユーザーが特定の日付を選択する必要があり、複数のエディターを組み合わせて日付範囲 UI を作成する場合に便利です。
Web Components 日付選択の例
このサンプルは、単一の日付を選択するオプションを使用して IgcDatePickerComponent を作成する方法を示しています。
依存関係
日付選択コンポーネントをインストールするときに core と input のパッケージもインストールする必要があります。
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-inputs
npm install --save igniteui-webcomponents-layouts
モジュールの要件
日付選択コンポーネントを使用するには、以下のモジュールを登録する必要があります。
import { IgcDatePickerModule } from 'igniteui-webcomponents-inputs';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(IgcDatePickerModule);
使用方法
Web Components 日付選択エディター コンポーネントは、デフォルトでは、テキスト領域、カレンダー ドロップダウン ボタン、およびクリア ボタンの 3 つの構成されます。これらの領域について以下に説明します。
テキスト領域: エディターの
valueプロパティに保存されている選択した日付を表示します。カレンダー: カレンダー ボタンをクリックすると、日付選択のカレンダー ドロップダウンが開きます。カレンダーが開き、現在選択されている
valueの月が表示されます。valueが指定されていない場合、カレンダーは現在の日付に対応する月を表示します。上部の月をクリックすると、月のリストが表示され、年も同様です。月と年の可視化の左右にある矢印ボタンは、表示されている月を時系列で増減します。クリア ボタン: x アイコンは現在の値をクリアします。
| プロパティ | タイプ | 説明 |
|---|---|---|
iconColor |
string | カレンダー ボタンの色を変更します。 |
allowTextInput |
bool | このプロパティを true に切り替えることで、日付ピッカーの値を入力して変更できます。 |
dateFormat |
enum | デフォルトは DateShort です。例: 'mm/dd/yyyy'。DateLong に設定すると、エディターに表示される曜日を含めた日付が表示されます。例: 2021年4月14日水曜日。 |
firstDayOfWeek |
enum | デフォルトは日曜日です。特定の曜日が、カレンダーの各週の行の最初の日として使用されます。例えば、月曜日から日曜日。 |
formatString |
string | DateShort を使用すると、日付の形式を構成できます。例えば、'dd/mm/yyyy'。dateFormat の DateLong と formatString が設定されている場合、dateFormat は無視されることに注意してください。 |
label |
string | 日付ピッカーの左上隅の日付の上にカスタム テキストを表示します。 |
minDate |
DateTime | 以前の日付が選択または表示されないように制限します。 |
maxDate |
DateTime | 後の日付が選択または表示されないように制限します。 |
placeholder |
string | カレンダーの編集部分の値がクリアされたときに表示されるカスタム文字列。 |
showClearButton |
bool | デフォルトは true で、クリア ボタンはカレンダー ボタンのすぐ左にあり、X で視覚化されます。クリックすると、日付ピッカーの value がクリアされます。クリア ボタンの表示は、オンとオフを切り替えることができます。 |
showTodayButton |
bool | 本日は、カレンダーが開かれた日付のすぐ下に表示されます。クリックすると、現在の日付が選択されます。本日のボタンの表示は、オンとオフを切り替えることができます。 |
showWeekNumbers |
bool | 週番号は、日付ピッカーのドロップダウン部分の日付のすべての行の左側に番号として表示できます。週番号の表示のオンとオフを切り替えることができます。 |
firstWeekOfYear |
enum | 年間の週の開始番号を構成します。FirstDay、FirstFourDayWeek、FirstFullWeek に設定できます。 |
openOnFocus |
bool | デフォルトでは、日付ピッカーのドロップダウン部分はシングル クリックで開かれ、ユーザーはカレンダー ボタンをクリックしてカレンダーをドロップダウンする必要があります。 |
value |
date | 日付ピッカーの値を設定し、ドロップダウン カレンダーで選択します。 |
ユーザーは、コントロールのさまざまなテキスト プロパティを使用して日付選択のフォントをカスタマイズできます。使用できるプロパティは textColor、TextFontFamily、TextFontSize、TextFontStyle、および TextFontWeight です。
編集
次の例は、IgcDatePickerComponent で編集を有効にする方法を示しています。
日付制限
次の例は、IgcDatePickerComponent で選択した日付を制限する方法を示しています。
日付の書式
次の例は、IgcDatePickerComponent で長い日付を適用する方法を示しています。
日付範囲
次の例は、複数の IgcDatePickerComponent コントロールを組み合わせる方法を示しています。
API リファレンス
以下は、上記のセクションで説明した API メンバーのリストです:
IgcDatePickerComponenticonColorallowTextInputdateFormatfirstDayOfWeekformatStringlabelminDatemaxDateplaceholdershowClearButtonshowTodayButtonshowWeekNumbersfirstWeekOfYearopenOnFocusvaluetextColorTextFontFamilyTextFontSizeTextFontStyleTextFontWeight