Class IgxDateTimeEditorDirective

Date Time Editor provides a functionality to input, edit and format date and time.




date, time, editor


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.

<input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [displayFormat]="'shortDate'" [(ngModel)]="date"/>


Hierarchy (view full)


  • OnChanges
  • OnInit
  • Validator
  • ControlValueAccessor



displayFormat: string

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'">
displayValuePipe: PipeTransform

Specifies a pipe to be used on blur.

<input [displayValuePipe] = "displayFormatPipe">
focusedValuePipe: PipeTransform

Specifies a pipe to be used on focus.

<input [focusedValuePipe] = "inputFormatPipe">
includeLiterals: boolean

Specifies if the bound value includes the formatting symbols.

<input [includeLiterals] = "true">
locale: string

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 If it is not registered, Intl will be used for formatting.

<input igxDateTimeEditor [locale]="'en'">
promptChar: string = '_'

Sets the character representing a fillable spot in the input mask. Default value is "'_'".

<input [promptChar] = "'/'">
spinDelta: DatePartDeltas

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}">
spinLoop: boolean = true

Specify if the currently spun date segment should loop over.

<input igxDateTimeEditor [spinLoop]="false">
validationFailed: EventEmitter<IgxDateTimeEditorEventArgs> = ...

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)"/>
valueChange: EventEmitter<string | Date> = ...

Emitted when the editor's value has changed.

<input igxDateTimeEditor (valueChange)="valueChange($event)"/>
valueChanged: EventEmitter<IMaskEventArgs> = ...

Emits an event each time the value changes. Provides rawValue: string and formattedValue: string as event arguments.

<input (valueChanged) = "valueChanged(rawValue: string, formattedValue: string)">