# EuiDateBlockComponent

**Type:** component



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
```html
<eui-date-block [blockDate]="eventDate"></eui-date-block>
```

### With Custom Format
```typescript
<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


**Selector:** `eui-date-block`

## Inputs
- **blockDate**: `Date` - 
- **dateFormat**: `string` - 
- **e2eAttr**: `string` - 
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]