Date Component
The ds-date component provides formatted date display with localization support.
Basic Usage
Section titled “Basic Usage”<ds-date value="2024-01-15"></ds-date>Formats
Section titled “Formats”Short Date
Section titled “Short Date”<ds-date value="2024-01-15" format="short"></ds-date><!-- Output: 1/15/24 -->Long Date
Section titled “Long Date”<ds-date value="2024-01-15" format="long"></ds-date><!-- Output: January 15, 2024 -->Relative Date
Section titled “Relative Date”<ds-date value="2024-01-15" format="relative"></ds-date><!-- Output: 3 days ago -->With Time
Section titled “With Time”<ds-date value="2024-01-15T14:30:00" show-time></ds-date><!-- Output: January 15, 2024 at 2:30 PM -->Attributes
Section titled “Attributes”| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | - | Date value (ISO format or timestamp) |
format | string | 'medium' | Format: short, medium, long, relative |
show-time | boolean | false | Include time in output |
locale | string | - | Override locale for formatting |
Localization
Section titled “Localization”The date component automatically uses the current language setting:
<!-- With Japanese locale --><ds-date value="2024-01-15" format="long"></ds-date><!-- Output: 2024年1月15日 -->Relative Time Updates
Section titled “Relative Time Updates”When using relative format, the display updates automatically:
<ds-date value="2024-01-15" format="relative" live></ds-date>