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.

IgxDateTimeEditorModule

IgxInputGroup

igx-input-theme

date, time, editor

Scheduling

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.

Note: This directive uses the Mask Directive internally and requires type="text" on the input element. Input elements with type="date" or other date/time types are not supported, as they do not allow programmatic cursor positioning and text selection required for mask functionality.

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

Hierarchy

Hierarchy (View Summary)

Implements

  • OnChanges
  • OnInit
  • Validator
  • ControlValueAccessor

Constructors

Properties

Accessors

Methods

Constructors

Properties

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

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

<input igxDateTimeEditor [defaultFormatType]="'dateTime'">
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 https://angular.io/guide/i18n#i18n-pipes. 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)">

Accessors

Methods