### File

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

### Description

A comprehensive date and datetime picker component that wraps Angular Material's datepicker with enhanced functionality. Supports date-only, month, year, and datetime selection modes with optional timepicker integration. Implements ControlValueAccessor for seamless integration with Angular reactive and template-driven forms.

Use cases:

- Standard date selection with calendar popup
- Month or year-only selection for period-based inputs
- Combined date and time selection with integrated timepicker
- Date range validation with min/max constraints
- Custom date filtering and styling
- Responsive layouts with block-level display option
- Read-only and disabled states for display-only scenarios

### Basic Date Picker

Example :

    <eui-datepicker
      [placeholder]="'Select date'"
      [(ngModel)]="selectedDate">
    </eui-datepicker>

### DateTime Picker

Example :

    <eui-datepicker
      [isDatetimepicker]="true"
      [hasSeconds]="true"
      [(ngModel)]="selectedDateTime">
    </eui-datepicker>

### Month/Year Picker

Example :

    <eui-datepicker
      type="month"
      [startView]="'year'"
      [(ngModel)]="selectedMonth">
    </eui-datepicker>

### With Validation

Example :

    // Component
    dateControl = new FormControl(null, Validators.required);
    minDate = new Date(2024, 0, 1);
    maxDate = new Date(2024, 11, 31);

    // Template
    <eui-datepicker
      [formControl]="dateControl"
      [minDate]="minDate"
      [maxDate]="maxDate"
      [isClearable]="true">
    </eui-datepicker>

### Accessibility

- Provides proper ARIA labels and roles for calendar navigation
- Keyboard navigation: Arrow keys for date selection, Enter to confirm, Escape to close
- Clear button is keyboard accessible when enabled
- Required state communicated via `aria-required` attribute
- Date format is announced to screen readers via placeholder
- Toggle button has accessible label via `togglerLabel` input

### Notes

- Use `dateOutputFormat` to control the format of emitted values (e.g., 'YYYY-MM-DD')
- `restrictToRegex` can limit input characters for format enforcement
- `datepickerFilter` enables custom date validation (e.g., disable weekends)
- `dateClass` allows styling specific dates (holidays, events)
- Time picker integrates seamlessly when `isDatetimepicker` is true
- `isDatepickerBlock` makes component responsive for mobile layouts
- `isReadOnly` allows calendar selection but prevents manual typing

### 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`
Custom component class to replace the default calendar header. Must be a valid Angular component that implements the Material datepicker header interface. Allows complete customization of the calendar header appearance and behavior.

customPanelClass
Type : `string | string[] | null`
Default value : `null`
Custom CSS class or classes applied to the calendar popup panel. Accepts a single class name string or an array of class names. Useful for theme customization or specific styling requirements.

dateClass
Type : `MatCalendarCellClassFunction<any>`
Function that returns CSS class names to apply to specific calendar date cells. Receives each date as a parameter and returns a string or array of class names. Enables visual styling of specific dates like holidays, events, or special occasions.

dateOutputFormat
Type : `string`
Moment.js format string for the output value emitted through form control and events. When specified, all emitted values are formatted strings instead of Moment objects. Example: 'YYYY-MM-DD' or 'DD/MM/YYYY HH:mm:ss'.

datepickerFilter
Type : `function`
Default value : `this.datepickerFiltering`
Custom filter function to enable or disable specific dates in the calendar. Receives each date as a parameter and should return true to enable the date, false to disable it. Useful for implementing business rules like disabling weekends or holidays.

e2eAttr
Type : `string`
Default value : `'eui-datepicker'`

hasNoButton
Type : `boolean`
Default value : `false`
Hides the calendar toggle button, leaving only the input field visible. Users can still open the calendar by clicking the input field if isShownOnInputClick is true. Useful for minimalist layouts or when calendar access should be input-driven only.

hasSeconds
Type : `boolean`
Default value : `false`
Displays seconds selector in the timepicker. Only applicable when isDatetimepicker is true. When false, only hours and minutes are selectable.

inputId
Type : `string`
Default value : ``eui-datepicker-${uniqueId()}``
Unique identifier for the input element. Used for label association, form integration, and testing selectors. Auto-generated if not provided.

isButtonDisabled
Type : `boolean`
Default value : `false`
Disables only the calendar toggle button while keeping the input field enabled. Users can type dates manually but cannot open the calendar popup. Useful for keyboard-only or text-based date entry scenarios.

isClearable
Type : `boolean`
Displays a clear button in the input field to reset the value to null. Automatically disabled when isReadOnly is true. Clicking the clear button emits null through inputChange and dateSelect events.

isDatepickerBlock
Type : `boolean`
Default value : `false`
Applies block-level display styling to make the component fill its container width. Enables responsive behavior for mobile and tablet layouts. When true, the input and button stretch to 100% width.

isDatetimepicker
Type : `boolean`
Default value : `false`
Enables datetime selection mode with an integrated timepicker in the calendar popup. When true, displays hour, minute, and optionally second selectors below the calendar. Changes the component behavior to handle both date and time values.

isDisabled
Type : `boolean`
Default value : `false`
Disables the entire component including input field, toggle button, and calendar popup. When true, no user interaction is possible and the component appears visually disabled. Integrates with Angular forms disabled state.

isInputDisabled
Type : `boolean`
Default value : `false`
Disables only the input field while keeping the calendar toggle button enabled. Users can select dates from the calendar but cannot type manually. Useful for enforcing calendar-only date selection.

isOneInputField
Type : `boolean`
Default value : `false`
Renders the timepicker with a single combined input field instead of separate hour/minute/second inputs. Only applicable when isDatetimepicker is true. Provides a more compact timepicker interface.

isPickerDisabled
Type : `boolean`
Default value : `false`
Disables the calendar popup functionality while keeping the input field enabled. Prevents the calendar from opening through any interaction method. Similar to isButtonDisabled but also blocks input-click calendar opening.

isReadOnly
Type : `boolean`
Default value : `false`
Makes the input field read-only, preventing manual text entry. Users can still select dates from the calendar popup. Automatically disables the clear button when true.

isShownOnInputClick
Type : `boolean`
Default value : `true`
Controls whether clicking the input field opens the calendar popup. When false, the calendar only opens via the toggle button. Useful when the input should be primarily for manual text entry.

maxDate
Type : `any`
The latest selectable date in the calendar. Dates after this value are disabled and cannot be selected. Accepts Moment objects, Date objects, or date strings compatible with the date adapter.

minDate
Type : `any`
The earliest selectable date in the calendar. Dates before this value are disabled and cannot be selected. Accepts Moment objects, Date objects, or date strings compatible with the date adapter.

placeholder
Type : `string`
Placeholder text displayed in the input field when empty. If not provided, defaults to translated placeholders based on the calendar type (regular, month, or year).

restrictToRegex
Type : `RegExp`
Regular expression pattern to restrict which characters can be typed in the input field. Accepts a RegExp object or a string that will be converted to RegExp. Each keypress is validated against this pattern; non-matching keys are blocked. Useful for enforcing numeric-only input or specific date format characters.

startView
Type : `"month" | "year" | "multi-year"`
The initial view displayed when the calendar popup opens. 'month' shows the day grid, 'year' shows month selection, 'multi-year' shows year range selection. If not specified, defaults based on the type property.

stepHours
Type : `number`
Default value : `1`
Increment/decrement step for hour adjustments in the timepicker. Only applicable when isDatetimepicker is true. Determines how many hours are added or subtracted with each button click.

stepMinutes
Type : `number`
Default value : `1`
Increment/decrement step for minute adjustments in the timepicker. Only applicable when isDatetimepicker is true. Determines how many minutes are added or subtracted with each button click.

stepSeconds
Type : `number`
Default value : `1`
Increment/decrement step for second adjustments in the timepicker. Only applicable when isDatetimepicker is true and hasSeconds is true. Determines how many seconds are added or subtracted with each button click.

togglerIconSvg
Type : `string`
Default value : `'eui-calendar'`
The SVG icon name displayed on the calendar toggle button. Must be a valid eui-icon identifier.

togglerLabel
Type : `string`
Accessible label text for the calendar toggle button. Used for screen readers and accessibility compliance.

type
Type : `"year" | "month" | "regular"`
Default value : `'regular'`
Determines the selection granularity and calendar behavior. 'regular' allows full date selection, 'month' selects month/year only, 'year' selects year only. Affects the calendar view, input format, and selection behavior.

value
Type : `any`
The initial or current date value displayed in the input field. Accepts Moment objects, Date objects, or date strings compatible with the configured date adapter. When dateOutputFormat is specified, the internal value is formatted accordingly.

### Outputs

dateSelect
Type : `EventEmitter`
Emitted when a date is selected from the calendar popup or through date/time adjustments. Payload contains the formatted date string (if dateOutputFormat is set) or Moment object, or null if cleared. Does not trigger on manual text input, only on calendar interactions and programmatic selections.

inputChange
Type : `EventEmitter`
Emitted when the input field value changes through user typing or programmatic updates. Payload contains the formatted date string (if dateOutputFormat is set) or Moment object, or null if cleared. Triggers on every input change, including manual text entry and clear actions.

### 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
Type : `unknown`
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
Type : `unknown`
Default value : `inject(EuiLetterFormatDirective, { optional: true })!`

Public inputFormControl
Type : `unknown`
Default value : `new FormControl()`

Public inputRef
Type : `ElementRef<HTMLInputElement>`
Decorators : `@ViewChild('input', {read: ElementRef})`

showDateButton
Type : `unknown`
Default value : `true`

templatePortalRef
Type : `TemplateRef<EuiActionButtonsDirective>`
Decorators : `@ViewChild('templatePortalRef')`

timePickerInstance
Type : `EuiTimepickerComponent`

### Accessors

cssClasses
get `cssClasses()`

isClearable
get `isClearable()`
Displays a clear button in the input field to reset the value to null. Automatically disabled when isReadOnly is true. Clicking the clear button emits null through inputChange and dateSelect events. Returns : `boolean`
set `isClearable(value: BooleanInput)`

Parameters :

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

Returns : `void`

restrictToRegex
get `restrictToRegex()`
Regular expression pattern to restrict which characters can be typed in the input field. Accepts a RegExp object or a string that will be converted to RegExp. Each keypress is validated against this pattern; non-matching keys are blocked. Useful for enforcing numeric-only input or specific date format characters. 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 ""