<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
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>
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>
Sets whether the seconds, minutes and hour spinning will loop back around when end value is reached. By default it's set to true.
<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.
Overrides the default text of the Cancel button.
Defaults to the value from resource strings, "Cancel" for the built-in EN.
<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.
Overrides the default text of the OK button.
Defaults to the value from resource strings, "OK" for the built-in EN.
<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.
Sets the --component-size CSS variable based on the value of Display Density
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 type="button" igxButton (click)="picker.open()">Open Dialog</button>
Emitted after the calendar has closed.