# EuiDateBlockComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-date-block [blockDate]=&quot;eventDate&quot;&gt;&lt;/eui-date-block&gt;</code></pre></div><h3>With Custom Format</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">&lt;eui-date-block
  [blockDate]=&quot;meetingDate&quot;
  dateFormat=&quot;dd/MM/yyyy&quot;&gt;
&lt;/eui-date-block&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses semantic <code>role=&quot;section&quot;</code> for proper screen reader identification</li>
<li>Date is formatted according to locale settings for internationalization</li>
<li>Visual date representation is supplemented with accessible text</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Automatically adapts to current locale via <code>LocaleService</code></li>
<li>Use <code>euiPrimary</code> or <code>euiSecondary</code> for color variants</li>
<li><code>dateFormat</code> accepts any valid Angular DatePipe format string</li>
<li>Component is read-only and does not support user interaction</li>
</ul>


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

**Standalone:** false

## Inputs

- **blockDate**: `Date` - 
- **dateFormat**: `string` - 
- **e2eAttr**: `string` - 
