SIA Web Design Library

Date: Pre Formatted Graphic

The Date component reacts to 3 context arguments in order:

  1. Timestamp: given a Unix timestamp in the timestamp key, it’s split into the graphic elements below and output the <time class='dt-start' datetime='x'> element. If there’s also a value for endTimestamp, output a second <time class='dt-end' datetime='x'> element and show an interval in the c-date__time span;
  2. Graphic: when the graphic modifier is present in display.modifiers display span elements for each keys of date and time pieces;
  3. Formatted: simply outputs the text in the formatted key and, when the isotime value is missing, use the formatted value as the datetime attribute.

If the decorative modifier is present, don’t use microformats, as it’s a purely decorative date looking element (e.g. in an agenda item with sub-sessions).

<time class='c-date c-date--graphic  dt-start ' datetime='2020-07-015T16:00:00+0200' />
03.07 — 15.07.2025
</time>
 
{% set isDecorative = 'decorative' in display.modifiers %}

{% if timestamp %}
    {% set isotime = timestamp|date( 'c' ) %}
    {% if 'graphic' in display.modifiers %}
        {% if 'time' in format %}
            {% if endTimestamp %}
                {% set startTime = timestamp|date( 'H:i' ) %}
                {% set endTime = endTimestamp|date( 'H:i' ) %}
                {% set time = startTime ~ '&nbsp;-&nbsp;' ~ endTime %}
            {% else %}
                {% set time = timestamp|date( 'H:i' ) %}
            {% endif %}
        {% endif %}
        {% if 'date' in format %}
            {% set day = timestamp|date( 'd' ) %}
            {% set month = timestamp|date( 'm' ) %}
        {% endif %}
        {% if 'year' in format %}
            {% set year = timestamp|date( 'Y' ) %}
        {% endif %}
    {% endif %}
{% endif %}

{% if endTimestamp %}
    {% set endIsotime = endTimestamp|date( 'c' ) %}
{% endif %}

<time class='{{ get_component_class( 'date', display ) }} {% if not isDecorative %} dt-start {% endif %}' {% if not isDecorative %} datetime='{% if isotime %}{{ isotime }}{% elseif formatted %}{{ formatted }}{% endif %}' {% endif %} />
    {% if ( day or month or year or time or timezone ) and ( 'graphic' in display.modifiers ) %}
        {% if day %}<span class='c-date__day'>{{ day }}</span>{% endif %}{% if month %}<span class='c-date__month'>{{ month }}</span>{% endif %}{% if year %}<span class='c-date__year'>{{ year }}</span>{% endif %}{% if time or timezone %}<span class='c-date__time-timezone'>{% if time %}<span class='c-date__time'>{{ time }}</span>{% endif %} {% if timezone %}<span class='c-date__timezone'>{{ timezone }}</span>{% endif %}</span>{% endif %}
    {% elseif formatted %}
        {{ formatted }}
    {% endif %}
</time>

{% if endIsotime and not isDecorative %}
    <time class='dt-end sr-only' datetime='{{ endIsotime }}'></time>
{% endif %}
 
{
  "formatted": "03.07 — 15.07.2025",
  "isotime": "2020-07-015T16:00:00+0200",
  "weekday": null,
  "day": null,
  "month": null,
  "year": null,
  "time": null,
  "timezone": null,
  "display": {
    "modifiers": [
      "graphic"
    ]
  }
}