### File

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

### Implements

`OnInit` `AfterViewInit` `ControlValueAccessor` `OnDestroy` `OnChanges` `DoCheck`

### Metadata

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`

### Index

###### Properties

- baseStatesDirective
- Public breakpointsValue
- calendar
- euiActionButtons
- euiLetterFormat
- Public inputFormControl
- Public inputRef
- showDateButton
- templatePortalRef
- timePickerInstance

###### Methods

- changedInput
- chosenDateHandler
- closeCalendar
- convTypeToStartView
- createInjector
- Public datepickerFiltering
- getEventPath
- onClear
- Public onDateChange
- Public onDateInput
- onDateSelectApply
- onKeypress
- onOpened
- openCalendar
- registerOnChange
- registerOnTouched
- selectToday
- Public Optional setDisabledState
- writeValue

###### Inputs

- customHeader
- customPanelClass
- dateClass
- dateOutputFormat
- datepickerFilter
- e2eAttr
- hasNoButton
- hasSeconds
- inputId
- isButtonDisabled
- isClearable
- isDatepickerBlock
- isDatetimepicker
- isDisabled
- isInputDisabled
- isOneInputField
- isPickerDisabled
- isReadOnly
- isShownOnInputClick
- maxDate
- minDate
- placeholder
- restrictToRegex
- startView
- stepHours
- stepMinutes
- stepSeconds
- togglerIconSvg
- togglerLabel
- type
- value

###### Outputs

- dateSelect
- inputChange

###### HostBindings

- class

###### Accessors

- cssClasses
- isClearable
- restrictToRegex
- mergedPanelClass

### Constructor

`constructor()`

### Inputs

customHeader
Type : `any`
Option to replace the current calendar header by a new one specified through a component class.

customPanelClass
Type : `string | string[] | null`
Default value : `null`
Allows passing one or multiple custom CSS classes to the underlying

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<any>)`

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<Moment | Date | string>)`

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<Moment | Date | string>)`

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
get `cssClasses()`

isClearable
get `isClearable()`
Sets the clearable attribute for the input field when read-only is false. Returns : `boolean`
set `isClearable(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

restrictToRegex
get `restrictToRegex()`
Option for restricting the input value to a specific regex pattern. Returns : `RegExp`
set `restrictToRegex(value: string | RegExp)`

Parameters :

Name | Type | Optional
value | `string | RegExp` | No

Returns : `void`

mergedPanelClass
get `mergedPanelClass()`
Returns an array of CSS classes to apply to the mat-datepicker panel. Combines internal classes with user-provided customPanelClass. Returns : `string[]`

# results matching ""

# No results matching ""