File

packages/eui/packages/components/eui-datepicker/eui-datepicker.component.ts

Implements

OnInit AfterViewInit ControlValueAccessor OnDestroy OnChanges DoCheck

Metadata

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Constructor

constructor()

Inputs

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.

Outputs

dateSelect
Type : EventEmitter

Event emitted upon date selection.

inputChange
Type : EventEmitter

Event emitted when there is a change in the input value.

HostBindings

class
Type : string

Methods

changedInput
changedInput(e: string | Event)

Method which fires when the input value changes and applies logic when isDatetimepicker true.

Parameters :
Name Type Optional Description
e string | Event No
  • The new value of the input field.
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 :
Name Type Optional Description
normalizedDate any No
  • The selected date in the calendar.
calendar MatDatepicker<any> No
  • The MatDatepicker instance.
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 :
Name Type Optional Description
type string No
  • The type of the calendar.
Returns : "year" | "month" | "multi-year"
  • The start view of the calendar.
createInjector
createInjector(data: any)

Creates an injector for the timepicker component.

Parameters :
Name Type Optional Description
data any No
  • The data to be passed to the timepicker component.
Returns : Injector
  • The created injector.
Public datepickerFiltering
datepickerFiltering()

Method which returns true in order to mark the date as valid.

Returns : boolean
  • Returns true if the date is valid.
getEventPath
getEventPath(event: KeyboardEvent)

Retrieves the event path for a given event. This method provides a fallback for browsers that do not support the event.path property by constructing the path manually.

Example :
     and traversing up through its ancestors, ending with the `document`
     and `window` objects.
Parameters :
Name Type Optional Description
event KeyboardEvent No
  • The event object of type KeyboardEvent.
Returns : EventTarget[]

An array representing the event path, starting from the event target and traversing up through its ancestors, ending with the document and window objects.

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 :
Name Type Optional Description
e MatDatepickerInputEvent<Moment | Date | string> No
  • The MatDatepickerInputEvent object containing the new value.
Returns : void
Public onDateInput
onDateInput(e: MatDatepickerInputEvent)

Method which fires when the datepicker input value changes and applies logic when isDatetimepicker is false.

Parameters :
Name Type Optional Description
e MatDatepickerInputEvent<Moment | Date | string> No
  • The MatDatepickerInputEvent object containing the new value.
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 :
Name Type Optional Description
e KeyboardEvent No
  • The KeyboardEvent object.
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 :
Name Type Optional
fn function No
Returns : void
registerOnTouched
registerOnTouched(fn: () => void)
Parameters :
Name Type Optional
fn function No
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 :
Name Type Optional Description
isDisabled boolean No
  • The boolean value indicating whether the component should be disabled or not.
Returns : void
writeValue
writeValue(value: any)
Parameters :
Name Type Optional
value any No
Returns : void

Properties

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

Accessors

cssClasses
getcssClasses()
isClearable
getisClearable()

Sets the clearable attribute for the input field when read-only is false.

Returns : boolean
setisClearable(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void
restrictToRegex
getrestrictToRegex()

Option for restricting the input value to a specific regex pattern.

Returns : RegExp
setrestrictToRegex(value: string | RegExp)
Parameters :
Name Type Optional
value string | RegExp No
Returns : void

results matching ""

    No results matching ""