<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
キャンセル可能なカレンダーの終了時に発生します。
<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
ピッカーを有効または無効にします。
<igx-date-picker [disabled]="'true'"></igx-date-picker>
編集可能な入力がフォーカスされていない場合に使用される形式。設定されていない場合、デフォルト値は inputFormat
です。
Angular の DatePipe
を使用します。
<igx-time-picker displayFormat="mm:ss"></igx-time-picker>
選択または渡された日付のカスタムフォーマッター関数を取得または設定します。
<igx-time-picker [value]="date" [formatter]="formatter"></igx-time-picker>
ピッカーのヘッダーの向きを設定します。
dialog モードでのみ使用できます。デフォルト値は horizontal
です。
<igx-time-picker [headerOrientation]="'vertical'"></igx-time-picker>
id
属性の値を設定する @Input プロパティです。
<igx-time-picker [id]="'igx-time-picker-5'" [displayFormat]="h:mm tt" ></igx-time-picker>
予想されるユーザー入力形式とプレースホルダー。
デファクト設定は hh:mm tt
<igx-time-picker inputFormat="HH:mm"></igx-time-picker>
操作モード (dialog または drop down) を取得/設定します。
<igx-time-picker mode="dialog"></igx-time-picker>
カレンダーが開いた後に発生します。
<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
キャンセル可能なカレンダーの開始時に発生します。
<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
ポップアップ要素に使用されるコンテナー。
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
<!-- ... -->
<igx-date-picker [outlet]="outlet"></igx-date-picker>
<!-- ... -->
ポップアップ要素の表示に使用されるオーバーレイ設定です。
<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>
ピッカーの入力の placeholder
を設定します。
<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>
選択が行われた後に発行されます。
<igx-time-picker (selected)="onSelection($event)"></igx-time-picker>
スピン動作を決定する @Input プロパティです。デフォルトで、spinLoop
が true に設定されます。
時、分、秒が最小値または最大値に達したときにデフォルトで折り返します。
<igx-time-picker [spinLoop]="false"></igx-time-picker>
デフォルトのテンプレート エディターの tabindex を取得または設定します。
<igx-date-picker [tabIndex]="1"></igx-date-picker>
ユーザーがタイム ピッカー エディターで無効な時間を入力/スピンしたときに発行されます。
<igx-time-picker (validationFailed)="onValidationFailed($event)"></igx-time-picker>
ピッカーの値が変更されたときに発生されます。
two-way
バインディングに使用されます。
<igx-time-picker [(value)]="date"></igx-time-picker>
キャンセル ボタンのラベルを返すアクセサーです。
カスタム テキストを使用して [キャンセル] ボタンを描画する @Input プロパティです。
デフォルトで cancelButtonLabel
が Cancel に設定されます。
<igx-time-picker cancelButtonLabel='Exit' [value]="date" format="h:mm tt"></igx-time-picker>
ドロップダウン/ダイアログが閉じたかどうかを取得します。
let isCollapsed = this.timePicker.collapsed;
バージョン 16.1.x 以降。
--ig-size
CSS カスタム プロパティを使用してください。
コンポーネントのテーマを返します。
デフォルトのテーマは comfortable
です。
利用可能なオプションは comfortable
、cosy
、または compact
です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
スピン アクションで各エディターの日付部分を増減し、
ドロップダウン/ダイアログに時間部分を表示するために使用されるデルタ値です。
デフォルトで itemsDelta
は {hour: 1, minute: 1, second: 1}
に設定されます。
<igx-time-picker [itemsDelta]="{hour:3, minute:5, second:10}" id="time-picker"></igx-time-picker>
date-picker の locale
を取得します。
設定されていない場合、デフォルトでアプリケーションのロケールになります。
date-picker のlocale
を設定します。
有効な BCP 47 言語タグに設定します。
ピッカーが受け入れる最大値です。
string
値が渡される場合、それは ISO 形式である必要があります。
<igx-time-picker [maxValue]="20:30:00"></igx-time-picker>
ピッカーが受け入れる最小値です。
string
値が渡される場合、それは ISO 形式である必要があります。
<igx-time-picker [minValue]="18:00:00"></igx-time-picker>
OK ボタンのラベルを返すアクセサーです。
カスタム テキストを使用して [OK] ボタンを描画する @Input プロパティです。デフォルトで、okButtonLabel
が OK に設定されます。
<igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></igx-time-picker>
リソース文字列を返すアクセサーです。
リソース文字列を設定するアクセサーです。 デフォルトで EN リソースを使用します。
ピッカーの入力のスタイル設定を決定します。
デフォルト値は box
です。
<igx-date-picker [type]="'line'"></igx-date-picker>
ドロップダウン/ダイアログから現在選択されている値/時間。
現在の値のタイプは Date
const newValue: Date = new Date(2000, 2, 2, 10, 15, 15);
this.timePicker.value = newValue;
value
入力を使用して時間を設定するためのアクセサーです。
public date: Date = new Date(Date.now());
//...
<igx-time-picker [value]="date" format="h:mm tt"></igx-time-picker>
週の最初の曜日を取得します。 曜日の数値または列挙型の表現を返します。 設定されていない場合、デフォルトでアプリケーション ロケールの週の初日になります。
週の最初の曜日を設定します。
数値または WEEKDAYS
の列挙型の値に割り当てます。
指定された DatePart
を減少します。
this.timePicker.decrement(DatePart.Seconds);
減少するオプションの DatePart です。デフォルト値は Hour です。
減少に使用するオプションのデルタ。itemsDelta
をオーバーライドします。
表示密度の値に基づいて --component-size
CSS 変数を設定します。
指定した DatePart
を増加します
this.timePicker.increment(DatePart.Hours);
増分するオプションの DatePart です。デフォルト値は Hour です。
増分するデルタ (オプション)。itemsDelta
をオーバーライドします。
ピッカーのダイアログ UI を開きます。
OverlaySettings - ドロップダウンまたはダイアログ コンテナーを適切に配置するために使用するオーバーレイ設定。
<igx-time-picker #picker [value]="date"></igx-time-picker>
<button type="button" igxButton (click)="picker.open()">Open Dialog</button>
カレンダーが閉じた後に発生します。