Davidson Styleguide

Date Range 

<span class="daterange__date">
    <time datetime="2023-08-24T15:47:53" class="">
        August 24, 2023
    </time>
  </span>

<span class="daterange__time">
    <time datetime="2023-08-24T15:47:53" class="">
        3:47 pm — 
    </time>
    <time datetime="2023-08-24T16:47:53" class="">
        4:47 pm
    </time>
  <span>
 
{% if daterange is not empty %}
{# I am not entirely certain this is the best semantic representation of a date range. -- JHW #}

{# if event starts and ends on the same day #}
{% if daterange.datestart.when|date('Y-m-d') == daterange.dateend.when|date('Y-m-d') %}
  {# need to separate calendar date from time for styling #}
  <span class="daterange__date">
    {% include '@datetime' with { datetime: { when: daterange.datestart.when, format: "F d, Y", machine: "Y-m-d\TH:i:s" } } %}
  </span>
  <span class="daterange__time">
    {% include '@datetime' with { datetime: { when: daterange.datestart.when, format: "g:i a — ", machine: "Y-m-d\TH:i:s" } } %}
    {% include '@datetime' with { datetime: { when: daterange.dateend.when, format: "g:i a", machine: "Y-m-d\TH:i:s" } } %}
  <span>
{% else %}
  {% include '@datetime' with { datetime: daterange.datestart } %} — {% include '@datetime' with { datetime: daterange.dateend } %}
{% endif %}
{% endif %}
 
{
  "daterange": {
    "datestart": {
      "when": "now",
      "format": "F, d Y \\a\\t H:i",
      "machine": "Y-m-d\\TH:i:s"
    },
    "dateend": {
      "when": "now + 1 hour",
      "format": "F, d Y \\a\\t H:i",
      "machine": "Y-m-d\\TH:i:s"
    }
  }
}

There are no notes for this item.