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

displayFormat

Section titled "displayFormat" 
displayFormat: string

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

inputFormat

Section titled "inputFormat" 
inputFormat: string

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

mask

Section titled "mask"

Inherited from: IgxMaskDirective 

mask: string

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

maxValue

Section titled "maxValue" 
maxValue: string | Date

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

minValue

Section titled "minValue" 
minValue: string | Date

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

value

Section titled "value" 
value: string | Date

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

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