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
.
Specifies a pipe to be used on blur.
<input [displayValuePipe] = "displayFormatPipe">
Specifies a pipe to be used on focus.
<input [focusedValuePipe] = "inputFormatPipe">
Specifies if the bound value includes the formatting symbols.
<input [includeLiterals] = "true">
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'">
Sets the character representing a fillable spot in the input mask. Default value is "'_'".
<input [promptChar] = "'/'">
Delta values used to increment or decrement each editor date part on spin actions.
All values default to 1
.
Specify if the currently spun date segment should loop over.
Emitted when the editor is not within a specified range or when the editor's value is in an invalid state.
Emitted when the editor's value has changed.
Emits an event each time the value changes.
Provides rawValue: string
and formattedValue: string
as event arguments.
<input (valueChanged) = "valueChanged(rawValue: string, formattedValue: string)">
Expected user input format (and placeholder).
Sets the input mask.
<input [igxMask] = "'00/00/0000'">
Maximum value required for the editor to remain valid.
If a string
value is passed in, it must be in the defined input format.
<input igxDateTimeEditor [maxValue]="maxDate">
Minimum value required for the editor to remain valid.
If a string
value is passed, it must be in the defined input format.
<input igxDateTimeEditor [minValue]="minDate">
Editor value.
Decrement specified DatePart.
The optional DatePart to decrement. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm').
The optional delta to decrement by. Overrides spinDelta
.
Increment specified DatePart.
The optional DatePart to increment. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm').
The optional delta to increment by. Overrides spinDelta
.
Date Time Editor provides a functionality to input, edit and format date and time.
Igx Module
IgxDateTimeEditorModule
Igx Parent
IgxInputGroup
Igx Theme
igx-input-theme
Igx Keywords
date, time, editor
Igx Group
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