Page History

Versions Compared

Link to Figma: tba(not verified)

The Dynamic Date Interval Counter Component calculates and displays the time difference between a specified date and the current date.
It is useful for showing durations such as “days since event” or “time elapsed since creation.”
The component can handle both single objects and collections of data.
It extracts dates from specified fields and formats the elapsed time in different ways.

...

dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "order-age-counter" allows test scripts to reliably locate this component during automated testing.
enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the counter can be highlighted during onboarding or tutorial flows to explain its meaning to users.
guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Ticket Age", "de-DE": "Ticket-Alter"} provides clear identification during guided tours.
guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This shows how long the ticket has been open", "de-DE": "Dies zeigt, wie lange das Ticket geöffnet ist"} provides detailed context during guided tours.

Use the counter to show elapsed time since a specific date taken directly from your data via dateDataField; pick a field path (supports dot notation like order.submitDate) that reliably resolves to a valid date.
Select precision with durationType: days for coarse status, daysWithHours for moderate precision, daysWithHoursAndMinutes for time‑sensitive contexts.
Name the instance clearly for authors via displayName so it’s easy to find in the structure panel.

...

Do	Don’t	Article setting(s)
Bind to a date field that always exists (use dot notation if needed).	Point to an optional or inconsistently typed field that yields “invalid date.”	`dateDataField`
Choose one suitable precision and keep it fixed per instance.	Flip between `days` and `daysWithHoursAndMinutes` mid-session.	`durationType`
Hide when the source date is missing or invalid.	Show “0 days” for records without a date.	`displayConditions`, `dateDataField`
Use `single` when reading from one record; `collection` when the source is a list.	Assume collections and singles behave the same or read from the wrong index.	`dataSourceType`, `dateDataField`
Refresh the value when global parameters change.	Leave stale values after context updates.	`events.ON_GLOBAL_PARAMETERS_CHANGE`
Add spacing only through the component’s padding token.	Rely on external CSS wrappers to create spacing.	`paddingClass`
Gate sensitive counters by policy.	Show sensitive durations to all users.	`visibilityPolicySetId`
Localize the hotspot copy for tours.	Hard‑code English strings in the tour.	`enableAsHotspot`, `guidedTourHotSpotTitle`, `guidedTourHotSpotDescription`	Provide a stable automation handle.	Select the component by brittle DOM structure.	`dataTestId`

Hide non-meaningful output by using displayConditions when dateDataField is empty or invalid.
Provide localized guidance in tours using enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.
Match durationType precision to the task so assistive tech announces sufficient context.
Keep format consistent per instance and update on events.ON_GLOBAL_PARAMETERS_CHANGE to avoid surprise changes.
Use visibilityPolicySetId to prevent exposing sensitive time information to unauthorized users.