### File

`packages/components/eui-date-block/eui-date-block.component.ts`

### Description

A visual date display component that presents dates in a calendar block format with day, month, and year. Useful for event listings, timelines, and date-centric interfaces.

### Basic Usage

Example :

    <eui-date-block [blockDate]="eventDate"></eui-date-block>

### With Custom Format

Example :

    <eui-date-block
      [blockDate]="meetingDate"
      dateFormat="dd/MM/yyyy">
    </eui-date-block>

### Accessibility

- Uses semantic `role="section"` for proper screen reader identification
- Date is formatted according to locale settings for internationalization
- Visual date representation is supplemented with accessible text

### Notes

- Automatically adapts to current locale via `LocaleService`
- Use `euiPrimary` or `euiSecondary` for color variants
- `dateFormat` accepts any valid Angular DatePipe format string
- Component is read-only and does not support user interaction

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary
host | `{ }`
selector | `eui-date-block`
imports | `AsyncPipe` `DatePipe`
templateUrl | `./eui-date-block.component.html`
styleUrl | `./eui-date-block.scss`

### Index

###### Inputs

- blockDate
- dateFormat
- e2eAttr

### Inputs

blockDate
Type : `Date`
Default value : `undefined`

dateFormat
Default value : `'dd/M/yyyy'`

e2eAttr
Default value : `'eui-date-block'`

# results matching ""

# No results matching ""