# EuiDatepickerComponent

**Type:** component



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
```html
<eui-datepicker
  [placeholder]="'Select date'"
  [(ngModel)]="selectedDate">
</eui-datepicker>
```

### DateTime Picker
```html
<eui-datepicker
  [isDatetimepicker]="true"
  [hasSeconds]="true"
  [(ngModel)]="selectedDateTime">
</eui-datepicker>
```

### Month/Year Picker
```html
<eui-datepicker
  type="month"
  [startView]="'year'"
  [(ngModel)]="selectedMonth">
</eui-datepicker>
```

### With Validation
```typescript
// 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


**Selector:** `eui-datepicker`

## Inputs
- **customHeader**: `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**: `string | string[] | 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**: `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**: `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**: `function` - 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**: `string` - 
- **hasNoButton**: `boolean` - 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**: `boolean` - Displays seconds selector in the timepicker. Only applicable when isDatetimepicker is true. When false, only hours and minutes are selectable.
- **inputId**: `string` - Unique identifier for the input element. Used for label association, form integration, and testing selectors. Auto-generated if not provided.
- **isButtonDisabled**: `boolean` - 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**: `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**: `boolean` - 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**: `boolean` - 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**: `boolean` - 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**: `boolean` - 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**: `boolean` - 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**: `boolean` - 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**: `boolean` - 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**: `boolean` - 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**: `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**: `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**: `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**: `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**: `"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**: `number` - 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**: `number` - 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**: `number` - 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**: `string` - The SVG icon name displayed on the calendar toggle button. Must be a valid eui-icon identifier.
- **togglerLabel**: `string` - Accessible label text for the calendar toggle button. Used for screen readers and accessibility compliance.
- **type**: `"year" | "month" | "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**: `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.
- **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` - 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**: `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.