Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

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

  • OnChanges
  • OnInit
  • Validator
  • ControlValueAccessor

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new IgxDateTimeEditorDirective(renderer: Renderer2, elementRef: ElementRef<any>, maskParser: MaskParsingService, platform: PlatformUtil, _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">

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

promptChar

promptChar: string = '_'

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

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

spinDelta

spinDelta: DatePartDeltas

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

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

spinLoop

spinLoop: boolean = true

Specify if the currently spun date segment should loop over.

example
<input igxDateTimeEditor [spinLoop]="false">

validationFailed

validationFailed: 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<string | Date> = ...

Emitted when the editor's value has changed.

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

valueChanged

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)">

Accessors

inputFormat

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

mask

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

maxValue

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

minValue

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

value

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

Methods

clear

  • clear(): void

decrement

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

increment

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

ngOnInit

  • ngOnInit(): void

onWheel

  • onWheel(event: WheelEvent): void