Emitted when the calendar has started closing, cancelable.
<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
Enables or disables the picker.
<igx-date-picker [disabled]="'true'"></igx-date-picker>
The format used when editable input is not focused. Defaults to the inputFormat if not set.
Uses Angular's DatePipe.
<igx-time-picker displayFormat="mm:ss"></igx-time-picker>
Gets/Sets a custom formatter function on the selected or passed date.
<igx-time-picker [value]="date" [formatter]="formatter"></igx-time-picker>
Sets the orientation of the picker's header.
Available in dialog mode only. Default value is horizontal.
<igx-time-picker [headerOrientation]="'vertical'"></igx-time-picker>
An
property that sets the value of the id attribute.
<igx-time-picker [id]="'igx-time-picker-5'" [displayFormat]="h:mm tt" ></igx-time-picker>
The expected user input format and placeholder.
Default is hh:mm tt
<igx-time-picker inputFormat="HH:mm"></igx-time-picker>
Gets/Sets the interaction mode - dialog or drop down.
<igx-time-picker mode="dialog"></igx-time-picker>
Emitted after the calendar has opened.
<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
Emitted when the calendar has started opening, cancelable.
<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
The container used for the pop-up element.
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
<!-- ... -->
<igx-date-picker [outlet]="outlet"></igx-date-picker>
<!-- ... -->
Overlay settings used to display the pop-up element.
<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>
Sets the placeholder of the picker's input.
<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>
Emitted after a selection has been done.
<igx-time-picker (selected)="onSelection($event)"></igx-time-picker>
An
property that determines the spin behavior. By default spinLoop is set to true.
The seconds, minutes and hour spinning will wrap around by default.
<igx-time-picker [spinLoop]="false"></igx-time-picker>
Gets/Sets the default template editor's tabindex.
<igx-date-picker [tabIndex]="1"></igx-date-picker>
Emitted when the user types/spins invalid time in the time-picker editor.
<igx-time-picker (validationFailed)="onValidationFailed($event)"></igx-time-picker>
Emitted when the picker's value changes.
Used for two-way bindings.
<igx-time-picker [(value)]="date"></igx-time-picker>
An accessor that returns the label of cancel button.
An
property that renders cancel button with custom text.
By default cancelButtonLabel is set to Cancel.
<igx-time-picker cancelButtonLabel='Exit' [value]="date" format="h:mm tt"></igx-time-picker>
Gets if the dropdown/dialog is collapsed
let isCollapsed = this.timePicker.collapsed;
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Delta values used to increment or decrement each editor date part on spin actions and
to display time portions in the dropdown/dialog.
By default itemsDelta is set to {hour: 1, minute: 1, second: 1}
<igx-time-picker [itemsDelta]="{hour:3, minute:5, second:10}" id="time-picker"></igx-time-picker>
Gets the locale of the date-picker.
If not set, defaults to applciation's locale..
Sets the locale of the date-picker.
Expects a valid BCP 47 language tag.
The maximum value the picker will accept.
If a string value is passed in, it must be in ISO format.
<igx-time-picker [maxValue]="20:30:00"></igx-time-picker>
The minimum value the picker will accept.
If a string value is passed in, it must be in ISO format.
<igx-time-picker [minValue]="18:00:00"></igx-time-picker>
An accessor that returns the label of ok button.
An
property that renders OK button with custom text. By default okButtonLabel is set to OK.
<igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></igx-time-picker>
An accessor that returns the resource strings.
An accessor that sets the resource strings. By default it uses EN resources.
Determines how the picker's input will be styled.
Default is box.
<igx-date-picker [type]="'line'"></igx-date-picker>
The currently selected value / time from the drop-down/dialog
The current value is of type Date
const newValue: Date = new Date(2000, 2, 2, 10, 15, 15);
this.timePicker.value = newValue;
An accessor that allows you to set a time using the value input.
public date: Date = new Date(Date.now());
//...
<igx-time-picker [value]="date" format="h:mm tt"></igx-time-picker>
Gets the start day of the week. Can return a numeric or an enum representation of the week day. If not set, defaults to the first day of the week for the application locale.
Sets the start day of the week.
Can be assigned to a numeric value or to WEEKDAYS enum value.
Decrement a specified DatePart
this.timePicker.decrement(DatePart.Seconds);
The optional DatePart to decrement. Defaults to Hour.
The optional delta to decrement by. Overrides itemsDelta.
Increment a specified DatePart.
this.timePicker.increment(DatePart.Hours);
The optional DatePart to increment. Defaults to Hour.
The optional delta to increment by. Overrides itemsDelta.
Opens the picker's dialog UI.
OverlaySettings - the overlay settings to use for positioning the drop down or dialog container according to
<igx-time-picker #picker [value]="date"></igx-time-picker>
<button (click)="picker.open()">Open Dialog</button>
Emitted after the calendar has closed.
Example