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.

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.

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.

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'.

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.

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.

Displays seconds selector in the timepicker. Only applicable when isDatetimepicker is true. When false, only hours and minutes are selectable.

Unique identifier for the input element. Used for label association, form integration, and testing selectors. Auto-generated if not provided.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 text displayed in the input field when empty. If not provided, defaults to translated placeholders based on the calendar type (regular, month, or year).

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.

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.

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.

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.

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.

The SVG icon name displayed on the calendar toggle button. Must be a valid eui-icon identifier.

Accessible label text for the calendar toggle button. Used for screen readers and accessibility compliance.

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.

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.

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.

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.

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

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.

Closes the calendar when isDatetimepicker or eui-action-buttons used and removes the applied footer when eui-action-buttons used

Converts the type of the calendar to the corresponding start view.

• The start view of the calendar.

Creates an injector for the timepicker component.

• The created injector.

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

• Returns true if the date is valid.

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.

     and traversing up through its ancestors, ending with the `document`
     and `window` objects.

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

Method which fires when clearing the input field and emits/propagates the null value.

Method which fires when there is a date change from the calendar popup, formats, emits and propagates the new value also when isDatetimepicker true.

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

When eui-action-buttons used, it applies the date selection and closes the calendar

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.

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.

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.

Selects today's date

Sets the disabled state of the component based on the boolean value passed.

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.

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 an array of CSS classes to apply to the mat-datepicker panel. Combines internal classes with user-provided customPanelClass.