### 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
selector | `eui-date-block`
imports | `AsyncPipe` `DatePipe`
templateUrl | `./eui-date-block.component.html`
styleUrl | `./eui-date-block.scss`

### Index

###### Inputs
blockDate dateFormat e2eAttr
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

blockDate
Type : `Date`

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

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

### HostBindings

class
Type : `string`
Computes and returns the CSS classes for the badge based on its current state

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the badge based on its current state Returns : `string`

# results matching ""

# No results matching ""