### 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)`
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
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 ""