DateTag

DateTag

DateTag is a lightweight date display helper that formats ISO date strings with Luxon. If parsing fails, it intentionally falls back to rendering the original input value unchanged.

This makes it safe for table cells and read-only views where data quality may vary and you still want to surface the raw value instead of an empty state.

Props

Name	Type	Required	Default	Description
date	string	Yes	—	Input date string passed to DateTime.fromISO(...).
format	string	No	MMMM dd, yyyy 'at' HH:mm	Luxon output format used by toFormat(...) when parsing succeeds.

Behavior

Parsing and formatting

DateTag uses Luxon:

DateTime.fromISO(date);

• if the parsed date is valid, it renders parsedDate.toFormat(format)
• if the parsed date is invalid, it renders the original date string as-is

Invalid value handling

When the input is invalid (including an empty string), the component renders:

• a <span> containing the original raw value
• data-testid="invalid-date"

This provides a predictable test hook while preserving user-visible data.

Usage

Default format

import DateTag from "@/components/core/Tags/DateTag";

<DateTag date="2025-08-29T14:30:00" />;
// Renders: August 29, 2025 at 14:30

Custom formats

<DateTag date="2025-08-29" format="MMMM dd, yyyy" />;
// Renders: August 29, 2025

<DateTag date="2025-08-29T14:30:00" format="HH:mm" />;
// Renders: 14:30

<DateTag date="2025-08-29T14:30:00" format="MMM dd, yyyy HH:mm" />;
// Renders: Aug 29, 2025 14:30

Invalid input fallback

<DateTag date="not-a-date" />;
// Renders: not-a-date

<DateTag date="" />;
// Renders: (empty string) with data-testid="invalid-date"

Notes

• The component does not localize timezone labels or relative time text. It only applies the requested Luxon format string.
• It does not trim or sanitize the input string before parsing.
• If you need strict validation or user-facing error states, handle those in the parent and use DateTag only for display.

Testing Notes

Unit tests currently cover:

• default format rendering for valid ISO input
• several custom format token combinations
• fallback behavior for invalid and empty inputs