igxTimePicker がフォーカスを持っていないときの時間書式を取得または設定する @Input プロパティ。
デフォルトの format は hh:mm tt です。
時間フラグのリスト。
h: 先行するゼロがない 12 時間形式の時フィールド。
hh: 先行するゼロがある 12 時間形式の時フィールド。
H: 先行するゼロがない 24 時間形式の時フィールド。
HH: 先行するゼロがある 24 時間形式の時フィールド。
m: 先行するゼロがない分フィールド。
mm: 先行するゼロがある分フィールド。
tt: AM/PM フィールドを表す 2 文字の文字列。
<igx-time-picker format="HH:m" id="time-picker"></igx-time-picker>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>timePicker が閉じているときに発生します。
timePicker が開いているときに発生します。
@ViewChild("toast")
private toast: IgxToastComponent;
public onOpen(timepicker){
this.toast.show();
}
//...<igx-time-picker [minValue]="min" [maxValue]="max" (onOpen)="onOpen($event)"></igx-time-picker>
<igx-toast #toast message="The time picker has been opened!"></igx-toast>無効な値が設定されているときに発生します。{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>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;
}OK ボタンのラベルを返すアクセサー。
カスタム テキストを使用して [OK] ボタンを描画する @Input プロパティ。デフォルトで okButtonLabel が OK に設定されます。
<igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></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>現在表示されている時間の配列を返します。
@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>ダイアログを開きます。
<igx-time-picker #tp></igx-time-picker>@ViewChild('tp', { read: IgxTimePickerComponent }) tp: IgxTimePickerComponent;
tp.openDialog();午前午後の項目を表示可能領域にスクロールします。
scrAmPmIntoView(tp) {
tp.scrollAmPmIntoView('PM');
}<igx-time-picker #tp format="h:mm tt" (onOpen)="scrAmPmIntoView(tp)"></igx-time-picker>ビューにスクロールするため。
時項目を表示可能領域にスクロールします。
scrhintoView(tp) {
tp.scrollHourIntoView('2');
}<igx-time-picker #tp format="h:mm tt" (onOpen)="scrhintoView(tp)"></igx-time-picker>ビューにスクロールするため。
分項目を表示可能領域にスクロールします。
scrMintoView(tp) {
tp.scrollMinuteIntoView('3');
}<igx-time-picker #tp format="h:mm tt" (onOpen)="scrMintoView(tp)"></igx-time-picker>ビューにスクロールするため。
An @Input property that gets/sets the delta by which hour and minute items would be changed
when the user presses the Up/Down keys.
By default itemsDelta is set to {hours: 1, minutes:1}
<igx-time-picker [itemsDelta]="{hours:3, minutes:5}" id="time-picker"></igx-time-picker>
igx-time-pickerコンポーネントの無効化を許可する @Input プロパティ。デフォルトでdisabledが false に設定されます。<igx-time-picker [disabled]="'true'" [vertical]="true" format="h:mm tt" ></igx-time-picker>