Date Time Editor provides a functionality to input, edit and format date and time.
Igx Module
IgxDateTimeEditorModule
Igx Theme
igx-input-theme
Igx Keywords
date, time, editor
Igx Group
Scheduling

Remarks

[object Object]

Example

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

Constructors

Section titled "Constructors"

IgxDateTimeEditorDirective 

new IgxDateTimeEditorDirective(): IgxDateTimeEditorDirective

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:301

Returns IgxDateTimeEditorDirective

Properties

Section titled "Properties"

defaultFormatType

Section titled "defaultFormatType"

Specify the default input format type. Defaults to date, which includes only date parts for editing. Other valid options are time and dateTime.

 
defaultFormatType: "time" | "date" | "dateTime" = 'date'

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:196

Example

<input igxDateTimeEditor [defaultFormatType]="'dateTime'">

displayValuePipe

Section titled "displayValuePipe"

Inherited from: IgxMaskDirective

Specifies a pipe to be used on blur.

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

Defined in projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:66

focusedValuePipe

Section titled "focusedValuePipe"

Inherited from: IgxMaskDirective

Specifies a pipe to be used on focus.

<input [focusedValuePipe] = "inputFormatPipe">
focusedValuePipe: PipeTransform

Defined in projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:75

includeLiterals

Section titled "includeLiterals"

Inherited from: IgxMaskDirective

Specifies if the bound value includes the formatting symbols.

<input [includeLiterals] = "true">
includeLiterals: boolean

Defined in projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:57

locale

Section titled "locale"

Locale settings used for value formatting.

 
locale: string

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:72

Remarks

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.

Example

<input igxDateTimeEditor [locale]="'en'">

promptChar

Section titled "promptChar"

Inherited from: IgxMaskDirective

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

<input [promptChar] = "'/'">
promptChar: string = '_'

Defined in projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:48

spinDelta

Section titled "spinDelta"

Delta values used to increment or decrement each editor date part on spin actions. All values default to 1.

 
spinDelta: DatePartDeltas

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:208

Example

<input igxDateTimeEditor [spinDelta]="{date: 5, minute: 30}">

spinLoop

Section titled "spinLoop"

Specify if the currently spun date segment should loop over.

 
spinLoop: boolean = true

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:125

Example

<input igxDateTimeEditor [spinLoop]="false">

validationFailed

Section titled "validationFailed"

Emitted when the editor is not within a specified range or when the editor's value is in an invalid state.

 
validationFailed: EventEmitter<IgxDateTimeEditorEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:230

Example

<input igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" (validationFailed)="onValidationFailed($event)"/>

valueChange

Section titled "valueChange"

Emitted when the editor's value has changed.

 
valueChange: EventEmitter<string | Date>

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:219

Example

<input igxDateTimeEditor (valueChange)="valueChange($event)"/>

valueChanged

Section titled "valueChanged"

Inherited from: IgxMaskDirective

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

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

Defined in projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:85

Accessors

Section titled "Accessors"

displayFormat

Section titled "displayFormat"

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.

 
set displayFormat(value: string): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:137

Example

<input igxDateTimeEditor [displayFormat]="'shortDate'">

Parameters

  • value: string

Returns void

inputFormat

Section titled "inputFormat"

Expected user input format (and placeholder).

 
set inputFormat(value: string): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:155

Example

<input [igxDateTimeEditor]="'dd/MM/yyyy'">

Parameters

  • value: string

Returns void

mask

Section titled "mask"

Inherited from: IgxMaskDirective

Sets the input mask.

<input [igxMask] = "'00/00/0000'">
get mask(): string

Defined in projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:26

Returns string 

set mask(val: string): void

Defined in projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:30

Parameters

  • val: string

Returns void

maxValue

Section titled "maxValue"

Maximum value required for the editor to remain valid.

 
get maxValue(): string | Date

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:106

Example

<input igxDateTimeEditor [maxValue]="maxDate">

Returns string | Date 

set maxValue(value: string | Date): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:111

Parameters

  • value: string | Date

Returns void

minValue

Section titled "minValue"

Minimum value required for the editor to remain valid.

 
get minValue(): string | Date

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:85

Example

<input igxDateTimeEditor [minValue]="minDate">

Returns string | Date 

set minValue(value: string | Date): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:90

Parameters

  • value: string | Date

Returns void

value

Section titled "value"

Editor value.

 
set value(value: string | Date): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:175

Example

<input igxDateTimeEditor [value]="date">

Parameters

  • value: string | Date

Returns void

Methods

Section titled "Methods"

clear

Section titled "clear"

Clear the input element value.

 
clear(): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:347

Returns void

decrement

Section titled "decrement"

Decrement specified DatePart.

 
decrement(datePart: DatePart, delta: number): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:375

Parameters

  • datePart: DatePart

    The optional DatePart to decrement. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm').
  • delta: number

    The optional delta to decrement by. Overrides spinDelta.

Returns void

increment

Section titled "increment"

Increment specified DatePart.

 
increment(datePart: DatePart, delta: number): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:360

Parameters

  • datePart: DatePart

    The optional DatePart to increment. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm').
  • delta: number

    The optional delta to increment by. Overrides spinDelta.

Returns void

onWheel

Section titled "onWheel" 
onWheel(event: WheelEvent): void

Defined in projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:308

Parameters

  • event: WheelEvent

Returns void