Set both pre-defined format options such as shortDate and longDate,
as well as constructed format string using characters supported by DatePipe, e.g. EE/MM/yyyy.
<input igxDateTimeEditor [displayFormat]="'shortDate'">
Specifies a pipe to be used on blur.
<input [displayValuePipe] = "displayFormatPipe">
Specifies a pipe to be used on focus.
<input [focusedValuePipe] = "inputFormatPipe">
Specifies if the bound value includes the formatting symbols.
<input [includeLiterals] = "true">
Locale settings used for value formatting.
Uses Angular's LOCALE_ID by default. Affects both input mask and display format if those are not set.
If a locale is set, it must be registered via registerLocaleData.
Please refer to https://angular.io/guide/i18n#i18n-pipes.
If it is not registered, Intl will be used for formatting.
<input igxDateTimeEditor [locale]="'en'">
Sets the character representing a fillable spot in the input mask. Default value is "'_'".
<input [promptChar] = "'/'">
Delta values used to increment or decrement each editor date part on spin actions.
All values default to 1.
<input igxDateTimeEditor [spinDelta]="{date: 5, minute: 30}">
Specify if the currently spun date segment should loop over.
<input igxDateTimeEditor [spinLoop]="false">
Emitted when the editor is not within a specified range or when the editor's value is in an invalid state.
<input igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" (validationFailed)="onValidationFailed($event)"/>
Emitted when the editor's value has changed.
<input igxDateTimeEditor (valueChange)="valueChange($event)"/>
Emits an event each time the value changes.
Provides rawValue: string and formattedValue: string as event arguments.
<input (valueChanged) = "valueChanged(rawValue: string, formattedValue: string)">
Expected user input format (and placeholder).
<input [igxDateTimeEditor]="'dd/MM/yyyy'">
Sets the input mask.
<input [igxMask] = "'00/00/0000'">
Maximum value required for the editor to remain valid.
If a string value is passed in, it must be in the defined input format.
<input igxDateTimeEditor [maxValue]="maxDate">
Minimum value required for the editor to remain valid.
If a string value is passed, it must be in the defined input format.
<input igxDateTimeEditor [minValue]="minDate">
Editor value.
<input igxDateTimeEditor [value]="date">
Decrement specified DatePart.
The optional DatePart to decrement. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm').
The optional delta to decrement by. Overrides spinDelta.
Increment specified DatePart.
The optional DatePart to increment. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm').
The optional delta to increment by. Overrides spinDelta.
Date Time Editor provides a functionality to input, edit and format date and time.
Igx Module
IgxDateTimeEditorModule
Igx Parent
IgxInputGroup
Igx Theme
igx-input-theme
Igx Keywords
date, time, editor
Igx Group
Scheduling
Remarks
The Ignite UI Date Time Editor Directive makes it easy for developers to manipulate date/time user input. It requires input in a specified or default input format which is visible in the input element as a placeholder. It allows the input of only date (ex: 'dd/MM/yyyy'), only time (ex:'HH:mm tt') or both at once, if needed. Supports display format that may differ from the input format. Provides methods to increment and decrement any specific/targeted
DatePart.Example