eui documentation
  1. Components
  2. EuiDateBlockComponent

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
HostBindings
Accessors

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
getcssClasses()

Computes and returns the CSS classes for the badge based on its current state

Returns : string

results matching ""

    No results matching ""