# EuiDatepickerComponent

**Type:** component




**Selector:** `eui-datepicker`

## Inputs
- **customHeader**: `any` - Option to replace the current calendar header by a new one specified through a component class.
- **customPanelClass**: `string | string[] | null` - Allows passing one or multiple custom CSS classes to the underlying
- **dateClass**: `MatCalendarCellClassFunction<any>` - Option to apply one or more css classes to some dates in the calendar.
- **dateOutputFormat**: `string` - Sets the date output format.
- **datepickerFilter**: `function` - Provides date validation based on the boolean value returned from the function.
- **e2eAttr**: `string` - 
- **hasNoButton**: `boolean` - Option for hiding the calendar button.
- **hasSeconds**: `boolean` - Option for adding seconds in the calendar timepicker view.
- **inputId**: `string` - Sets a unique id for the input field.
- **isButtonDisabled**: `boolean` - Option for disabling only the trigger button.
- **isClearable**: `boolean` - Sets the clearable attribute for the input field when read-only is false.
- **isDatepickerBlock**: `boolean` - Option for making the input field responsive.
- **isDatetimepicker**: `boolean` - Option to inject timepicker into the calendar.
- **isDisabled**: `boolean` - Option for disabling the whole component.
- **isInputDisabled**: `boolean` - Option for disabling only the input field.
- **isOneInputField**: `boolean` - Option for enabling a one input field timepicker in the calendar.
- **isPickerDisabled**: `boolean` - Option for disabling the calendar picker.
- **isReadOnly**: `boolean` - Option for making the input field read-only.
- **isShownOnInputClick**: `boolean` - Option for opening the calendar upon clicking in the input field.
- **maxDate**: `any` - Sets maximum date in the calendar.
- **minDate**: `any` - Sets minimum date in the calendar.
- **placeholder**: `string` - Sets the placeholder of the input field.
- **restrictToRegex**: `RegExp` - Option for restricting the input value to a specific regex pattern.
- **startView**: `"month" | "year" | "multi-year"` - Sets the starting view of the calendar.
- **stepHours**: `number` - Sets the step for increasing/decreasing hours.
- **stepMinutes**: `number` - Sets the step for increasing/decreasing minutes.
- **stepSeconds**: `number` - Sets the step for increasing/decreasing seconds.
- **togglerIconSvg**: `string` - Sets the svg icon for the calendar toggler button.
- **togglerLabel**: `string` - Sets the name of the calendar toggler button label.
- **type**: `"year" | "month" | "regular"` - Sets the type of the calendar.
- **value**: `any` - Sets the default value of the input field.
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **dateSelect**: `EventEmitter` - Event emitted upon date selection.
- **inputChange**: `EventEmitter` - Event emitted when there is a change in the input value.
