packages/eui/packages/components/eui-datepicker/eui-datepicker.component.ts
OnInit
AfterViewInit
ControlValueAccessor
OnDestroy
OnChanges
DoCheck
encapsulation | ViewEncapsulation.None |
HostDirectives |
BaseStatesDirective
Inputs : euiSuccess euiInfo euiWarning euiDanger euiVariant
|
selector | eui-datepicker |
imports |
MatDatepickerModule
FormsModule
ReactiveFormsModule
TranslateModule
EUI_INPUT_TEXT
EUI_INPUT_GROUP
EUI_BUTTON
EUI_ICON
|
templateUrl | ./eui-datepicker.component.html |
styleUrl | ./eui-datepicker.scss |
constructor()
|
customHeader |
Type : any
|
Option to replace the current calendar header by a new one specified through a component class. |
dateClass |
Type : MatCalendarCellClassFunction<any>
|
Option to apply one or more css classes to some dates in the calendar. |
dateOutputFormat |
Type : string
|
Sets the date output format. |
datepickerFilter |
Type : function
|
Default value : this.datepickerFiltering
|
Provides date validation based on the boolean value returned from the function. |
e2eAttr |
Type : string
|
Default value : 'eui-datepicker'
|
hasNoButton |
Type : boolean
|
Default value : false
|
Option for hiding the calendar button. |
hasSeconds |
Type : boolean
|
Default value : false
|
Option for adding seconds in the calendar timepicker view. |
inputId |
Type : string
|
Default value : `eui-datepicker-${uniqueId()}`
|
Sets a unique id for the input field. |
isButtonDisabled |
Type : boolean
|
Default value : false
|
Option for disabling only the trigger button. |
isClearable |
Type : boolean
|
Sets the clearable attribute for the input field when read-only is false. |
isDatepickerBlock |
Type : boolean
|
Default value : false
|
Option for making the input field responsive. |
isDatetimepicker |
Type : boolean
|
Default value : false
|
Option to inject timepicker into the calendar. |
isDisabled |
Type : boolean
|
Default value : false
|
Option for disabling the whole component. |
isInputDisabled |
Type : boolean
|
Default value : false
|
Option for disabling only the input field. |
isOneInputField |
Type : boolean
|
Default value : false
|
Option for enabling a one input field timepicker in the calendar. |
isPickerDisabled |
Type : boolean
|
Default value : false
|
Option for disabling the calendar picker. |
isReadOnly |
Type : boolean
|
Default value : false
|
Option for making the input field read-only. |
isShownOnInputClick |
Type : boolean
|
Default value : true
|
Option for opening the calendar upon clicking in the input field. |
maxDate |
Type : any
|
Sets maximum date in the calendar. |
minDate |
Type : any
|
Sets minimum date in the calendar. |
placeholder |
Type : string
|
Sets the placeholder of the input field. |
restrictToRegex |
Type : RegExp
|
Option for restricting the input value to a specific regex pattern. |
startView |
Type : "month" | "year" | "multi-year"
|
Sets the starting view of the calendar. |
stepHours |
Type : number
|
Default value : 1
|
Sets the step for increasing/decreasing hours. |
stepMinutes |
Type : number
|
Default value : 1
|
Sets the step for increasing/decreasing minutes. |
stepSeconds |
Type : number
|
Default value : 1
|
Sets the step for increasing/decreasing seconds. |
togglerIconSvg |
Type : string
|
Default value : 'eui-calendar-outline'
|
Sets the svg icon for the calendar toggler button. |
togglerLabel |
Type : string
|
Sets the name of the calendar toggler button label. |
type |
Type : "year" | "month" | "regular"
|
Default value : 'regular'
|
Sets the type of the calendar. |
value |
Type : any
|
Sets the default value of the input field. |
dateSelect |
Type : EventEmitter
|
Event emitted upon date selection. |
inputChange |
Type : EventEmitter
|
Event emitted when there is a change in the input value. |
class |
Type : string
|
changedInput | ||||||||
changedInput(e: string | Event)
|
||||||||
Method which fires when the input value changes and applies logic when isDatetimepicker true.
Parameters :
Returns :
void
|
chosenDateHandler | ||||||||||||
chosenDateHandler(normalizedDate: any, calendar: MatDatepicker
|
||||||||||||
Fires when the type of the calendar is either month or year, formats the date if dateOutputFormat used emits and propagates the selected date value and closes the calendar.
Parameters :
Returns :
void
|
closeCalendar |
closeCalendar()
|
Closes the calendar when isDatetimepicker or eui-action-buttons used and removes the applied footer when eui-action-buttons used
Returns :
void
|
convTypeToStartView | ||||||||
convTypeToStartView(type: string)
|
||||||||
Converts the type of the calendar to the corresponding start view.
Parameters :
Returns :
"year" | "month" | "multi-year"
|
createInjector | ||||||||
createInjector(data: any)
|
||||||||
Creates an injector for the timepicker component.
Parameters :
Returns :
Injector
|
Public datepickerFiltering |
datepickerFiltering()
|
Method which returns true in order to mark the date as valid.
Returns :
boolean
|
onClear |
onClear()
|
Method which fires when clearing the input field and emits/propagates the null value.
Returns :
void
|
Public onDateChange | ||||||||
onDateChange(e: MatDatepickerInputEvent
|
||||||||
Method which fires when there is a date change from the calendar popup, formats, emits and propagates the new value also when isDatetimepicker true.
Parameters :
Returns :
void
|
Public onDateInput | ||||||||
onDateInput(e: MatDatepickerInputEvent
|
||||||||
Method which fires when the datepicker input value changes and applies logic when isDatetimepicker is false.
Parameters :
Returns :
void
|
onDateSelectApply |
onDateSelectApply()
|
When eui-action-buttons used, it applies the date selection and closes the calendar
Returns :
void
|
onKeypress | ||||||||
onKeypress(e: KeyboardEvent)
|
||||||||
Method which fires upon keypress and opens the calendar if isShownOnInputClick is true and the Enter key is pressed. Also if there is a restrictToRegex, it prevents the default action if the key is not matching the regex.
Parameters :
Returns :
void
|
onOpened |
onOpened()
|
When calendar opens and isDatetimepicker or eui-action-buttons directive used, it closes the calendar when clicking outside of the overlay. If eui-action-buttons directive is used it registers the template portal where the user can add projected content as a footer.
Returns :
void
|
openCalendar |
openCalendar()
|
Opens the calendar if read-only is false, listens to the keydown event when isDatetimepicker or euiActionButtons used and creates the time config passed to the timepicker component.
Returns :
void
|
registerOnChange | ||||||
registerOnChange(fn: () => void)
|
||||||
Parameters :
Returns :
void
|
registerOnTouched | ||||||
registerOnTouched(fn: () => void)
|
||||||
Parameters :
Returns :
void
|
selectToday |
selectToday()
|
Selects today's date
Returns :
void
|
Public Optional setDisabledState | ||||||||
setDisabledState(isDisabled: boolean)
|
||||||||
Sets the disabled state of the component based on the boolean value passed.
Parameters :
Returns :
void
|
writeValue | ||||||
writeValue(value: any)
|
||||||
Parameters :
Returns :
void
|
baseStatesDirective |
Default value : inject(BaseStatesDirective)
|
Public breakpointsValue |
Type : any
|
Default value : {
isMobile: false,
isTablet: false,
isLtDesktop: false,
isDesktop: false,
isXL: false,
isXXL: false,
}
|
calendar |
Type : MatDatepicker<any>
|
Decorators :
@ViewChild('calendar', {static: true})
|
euiActionButtons |
Type : EuiActionButtonsDirective
|
Decorators :
@ContentChild(undefined)
|
euiLetterFormat |
Default value : inject(EuiLetterFormatDirective, { optional: true })!
|
Public inputFormControl |
Default value : new FormControl()
|
Public inputRef |
Type : ElementRef<HTMLInputElement>
|
Decorators :
@ViewChild('input', {read: ElementRef})
|
showDateButton |
Default value : true
|
templatePortalRef |
Type : TemplateRef<EuiActionButtonsDirective>
|
Decorators :
@ViewChild('templatePortalRef')
|
timePickerInstance |
Type : EuiTimepickerComponent
|
cssClasses |
getcssClasses()
|
isClearable | ||||||
getisClearable()
|
||||||
Sets the clearable attribute for the input field when read-only is false.
Returns :
boolean
|
||||||
setisClearable(value: BooleanInput)
|
||||||
Parameters :
Returns :
void
|
restrictToRegex | ||||||
getrestrictToRegex()
|
||||||
Option for restricting the input value to a specific regex pattern.
Returns :
RegExp
|
||||||
setrestrictToRegex(value: string | RegExp)
|
||||||
Parameters :
Returns :
void
|