id 属性の値を設定する @Input プロパティ。
<igx-time-picker [id]="'igx-time-picker-5'" format="h:mm tt" ></igx-time-picker>スピン動作を決定する @Input プロパティ。デフォルトで isSpinLoop が true に設定されます。
時、分、秒が最小値または最大値に達したときにデフォルトで折り返します。
<igx-time-picker [isSpinLoop]="false" id="time-picker"></igx-time-picker>ユーザー入力を制限するために maxValue の設定を許可する @Input プロパティ。
public max: string = "18:00";
//..
<igx-time-picker format="HH:mm" [vertical]="true" [maxValue]="max"></igx-time-picker>ユーザー入力を制限するために minValue の設定を許可する @Input プロパティ。
public min: string = "09:00";
//..
<igx-time-picker format="HH:mm" [vertical]="true" [minValue]="min"></igx-time-picker>ダイアログ ピッカーとドロップダウンを編集可能なマスクされた入力のインタラクションの切り替えを許可する @Input プロパティ。 デフォルトはダイアログ ピッカーです。
public mode = InteractionMode.DROPDOWN;
//..
<igx-time-picker [mode]="mode"></igx-time-picker>timePicker が閉じたときに発生します。
timePicker が閉じているときに発生します。
timePicker が開いたときに発生します。
無効な値が設定されているときに発生します。{timePicker: any, currentValue: Date, setThroughUI: boolean} を返します。
public min: string = "09:00";
public max: string = "18:00";
@ViewChild("toast")
private toast: IgxToastComponent;
public onValidationFailed(timepicker){
this.toast.show();
}
//...<igx-time-picker [minValue]="min" [maxValue]="max" (onValidationFailed)="onValidationFailed($event)"></igx-time-picker>
<igx-toast #toast message="Value must be between 09:00 and 18:00!"></igx-toast>選択が実行されたときに発生します。イベントは選択済みの値を含みます。{oldValue: Date, newValue: Date} を返します。
@ViewChild("toast")
private toast: IgxToastComponent;
public onValueChanged(timepicker){
this.toast.show()
}
//...<igx-time-picker (onValueChanged)="onValueChanged($event)"></igx-time-picker>
<igx-toast #toast message="The value has been changed!"></igx-toast>Popup 要素を結び付けるコンテナを決定します。
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
//..
<igx-time-picker [outlet]="outlet"></igx-time-picker>
//..Outlet は IgxOverlayOutletDirective または ElementRef のインスタンスです。
ユーザーに入力を促す文字を設定します。 デフォルト値は "'-'" です。
<igx-time-picker [promptChar] = "'_'">igxTimePicker の方向を取得または設定する @Input プロパティ。デフォルトで、vertical は false に設定されます。
<igx-time-picker [vertical]="true" id="time-picker"></igx-time-picker>キャンセル ボタンのラベルを返すアクセサー。
カスタム テキストを使用して [キャンセル] ボタンを描画する @Input プロパティ。
デフォルトで cancelButtonLabel が Cancel に設定されます。
<igx-time-picker cancelButtonLabel='Exit' [value]="date" format="h:mm tt"></igx-time-picker>入力グループのテンプレートに渡されたコンテキストを取得します。
format オプションを使用して文字列として書式設定される現在の時間を返します。
時間が設定されない場合、空の文字列を返します。
@ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
let time = this.picker.displayTime;
}igxTimePicker がフォーカスを持っていないときの時間書式を取得または設定する @Input プロパティ。
デフォルトの format は hh:mm tt です。
時間フラグのリスト。
h: 先行するゼロがない 12 時間形式の時フィールド。
hh: 先行するゼロがある 12 時間形式の時フィールド。
H: 先行するゼロがない 24 時間形式の時フィールド。
HH: 先行するゼロがある 24 時間形式の時フィールド。
m: 先行するゼロがない分フィールド。
mm: 先行するゼロがある分フィールド。
s: 先行するゼロがない秒フィールド。
ss: 先行するゼロがある秒フィールド。
tt: AM/PM フィールドを表す 2 文字の文字列。
<igx-time-picker format="HH:m" id="time-picker"></igx-time-picker>igxTimePicker がフォーカスを持っていないときの時間書式を取得または設定する @Input プロパティ。
デフォルトの format は hh:mm tt です。
時間フラグのリスト。
h: 先行するゼロがない 12 時間形式の時フィールド。
hh: 先行するゼロがある 12 時間形式の時フィールド。
H: 先行するゼロがない 24 時間形式の時フィールド。
HH: 先行するゼロがある 24 時間形式の時フィールド。
m: 先行するゼロがない分フィールド。
mm: 先行するゼロがある分フィールド。
s: 先行するゼロがない秒フィールド。
ss: 先行するゼロがある秒フィールド。
tt: AM/PM フィールドを表す 2 文字の文字列。
<igx-time-picker format="HH:m" id="time-picker"></igx-time-picker>ユーザーが上下の矢印キーを押したときに時および分の項目が表示されるデルタを取得または設定する @Input プロパティ。
デフォルトで itemsDelta は {hours: 1, minutes: 1, seconds: 1} に設定されます。
<igx-time-picker [itemsDelta]="{hours:3, minutes:5, seconds:10}" id="time-picker"></igx-time-picker>ユーザーが上下の矢印キーを押したときに時および分の項目が表示されるデルタを取得または設定する @Input プロパティ。
デフォルトで itemsDelta は {hours: 1, minutes: 1, seconds: 1} に設定されます。
<igx-time-picker [itemsDelta]="{hours:3, minutes:5, seconds:10}" id="time-picker"></igx-time-picker>OK ボタンのラベルを返すアクセサー。
カスタム テキストを使用して [OK] ボタンを描画する @Input プロパティ。デフォルトで okButtonLabel が OK に設定されます。
<igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></igx-time-picker>オーバーレイの位置、インタラクション、およびスクロール動作を変更できる @Input プロパティ。
const settings: OverlaySettings = {
closeOnOutsideClick: true,
modal: false
}<igx-time-picker [overlaySettings]="settings"></igx-time-picker>オーバーレイの位置、インタラクション、およびスクロール動作を変更できる @Input プロパティ。
const settings: OverlaySettings = {
closeOnOutsideClick: true,
modal: false
}<igx-time-picker [overlaySettings]="settings"></igx-time-picker>リソース文字列を返すアクセサー。
リソース文字列を設定するアクセサー。 デフォルトで EN リソースを使用します。
入力グループのテンプレートを取得します。
let template = this.template();igx-time-picker コンポーネントの値を返すアクセサー。
@ViewChild("MyPick")
public pick: IgxTimePickerComponent;
ngAfterViewInit(){
let pickSelect = this.pick.value;
}value 入力を使用して時間の設定を許可するアクセサー。
public date: Date = new Date(Date.now());
//...
<igx-time-picker [value]="date" format="h:mm tt"></igx-time-picker>現在表示されている AM/PM の配列を返します。
@ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
let ApInView = this.picker.ampmInView;
}現在の値を選択せずにダイアログを閉じます。
<igx-dialog class="igx-time-picker__dialog-popup" [leftButtonLabel]="cancelButtonLabel" (onLeftButtonSelect)="cancelButtonClick()">
//...
</igx-dialog>ドロップ ダウンを閉じます。
<igx-time-picker #timePicker></igx-time-picker>@ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
picker.close();現在表示されている時間の配列を返します。
@ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
let hInView = this.picker.hoursInView;
}現在表示されている分の配列を返します。
@ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
let minInView = this.picker.minutesInView;
}現在の値が有効な場合、その値を選択し、ダイアログを閉じて true を返します。それ以外の場合は false を返します。
<igx-dialog class="igx-time-picker__dialog-popup" [rightButtonLabel]="okButtonLabel" (onRightButtonSelect)="okButtonClick()">
//..
</igx-dialog>ダイアログを開きます。
HTMLElement - 次に従ってドロップダウンコンテナを配置するために使用するターゲット要素。
<igx-time-picker [value]="date" mode="dropdown" #retemplated>
<ng-template igxTimePickerTemplate let-openDialog="openDialog"
let-displayTime="displayTime">
<igx-input-group>
<input #dropDownTarget igxInput [value]="displayTime" />
<igx-suffix (click)="openDialog(dropDownTarget)">
<igx-icon>alarm</igx-icon>
</igx-suffix>
</igx-input-group>
</ng-template>
</igx-time-picker>午前午後の項目を表示可能領域にスクロールします。
scrAmPmIntoView(picker) {
picker.scrollAmPmIntoView('PM');
}<igx-time-picker #picker format="h:mm tt" (onOpened)="scrAmPmIntoView(picker)"></igx-time-picker>ビューにスクロールするため。
時項目を表示可能領域にスクロールします。
scrhintoView(picker) {
picker.scrollHourIntoView('2');
}<igx-time-picker #picker format="h:mm tt" (onOpened)="scrhintoView(picker)"></igx-time-picker>ビューにスクロールするため。
分項目を表示可能領域にスクロールします。
scrMintoView(picker) {
picker.scrollMinuteIntoView('3');
}<igx-time-picker #picker format="h:mm tt" (onOpened)="scrMintoView(picker)"></igx-time-picker>ビューにスクロールするため。
秒項目を表示領域にスクロールします。
scrMintoView(picker) {
picker.scrollSecondsIntoView('4');
}<igx-time-picker #picker format="h:mm tt" (onOpened)="scrMintoView(picker)"></igx-time-picker>ビューにスクロールします。
現在表示されている秒の配列を返します。
@ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
let minInView = this.picker.secondsInView;
}
igx-time-pickerコンポーネントの無効化を許可する @Input プロパティ。デフォルトでdisabledが false に設定されます。<igx-time-picker [disabled]="'true'" [vertical]="true" format="h:mm tt" ></igx-time-picker>