Class IgxDateTimeEditorDirective

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

@igxmodule

IgxDateTimeEditorModule

@igxparent

IgxInputGroup

@igxtheme

igx-input-theme

@igxkeywords

date, time, editor

@igxgroup

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

Hierarchy

Implements

  • OnInit
  • AfterViewChecked
  • ControlValueAccessor
  • OnChanges
  • DoCheck
  • Validator
  • ControlValueAccessor

Constructors

constructor

  • new IgxDateTimeEditorDirective(renderer: Renderer2, elementRef: ElementRef, maskParser: MaskParsingService, _document: any, _locale: any): IgxDateTimeEditorDirective

Properties

displayFormat

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.

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

displayValuePipe

displayValuePipe: PipeTransform

Specifies a pipe to be used on blur.

<input [displayValuePipe] = "displayFormatPipe">

focusedValuePipe

focusedValuePipe: PipeTransform

Specifies a pipe to be used on focus.

<input [focusedValuePipe] = "inputFormatPipe">

includeLiterals

includeLiterals: boolean

Specifies if the bound value includes the formatting symbols.

<input [includeLiterals] = "true">

isSpinLoop

isSpinLoop: boolean = true

Specify if the currently spun date segment should loop over.

@example
<input igxDateTimeEditor [isSpinLoop]="false">

locale

locale: string

Locale settings used for value formatting.

@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'">

mask

mask: string

Sets the input mask.

<input [igxMask] = "'00/00/0000'">

onValueChange

onValueChange: EventEmitter<IMaskEventArgs> = new EventEmitter<IMaskEventArgs>()

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

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

promptChar

promptChar: string = "_"

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

<input [promptChar] = "'/'">

validationFailed

validationFailed: EventEmitter<IgxDateTimeEditorEventArgs> = new EventEmitter<IgxDateTimeEditorEventArgs>()

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

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

valueChange

valueChange: EventEmitter<Date> = new EventEmitter<Date>()

Emitted when the editor's value has changed.

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

Accessors

inputFormat

  • get inputFormat(): string
  • set inputFormat(value: string): void

maxValue

  • get maxValue(): string | Date
  • set maxValue(value: string | Date): void

minValue

  • get minValue(): string | Date
  • set minValue(value: string | Date): void

placeholder

  • get placeholder(): string
  • set placeholder(val: string): void

value

  • get value(): Date
  • set value(value: Date): void

Methods

clear

  • clear(): void

decrement

increment

parseDate

  • parseDate(val: string): Date | null