{% load i18n djadmin %}{% comment %}
  Django stacks the two halves of a datetime — "Date:" on one line, "Time:" on
  the next, each with its own shortcut links and icon — which costs about 250px
  of column. Here they sit on one row and share a single popover: calendar on
  the left, times on the right.

  The subwidgets are rendered through the base input template rather than
  through their own template_name: on Django 4.2 that resolves to
  admin/widgets/date.html above, which would wrap a picker inside a picker.
{% endcomment %}
<span class="dj-datetime" data-dj-picker="datetime">
  <span class="dj-picker dj-picker--date">
    <label class="dj-visually-hidden" {% if widget.attrs.id %}for="{{ widget.subwidgets.0.attrs.id }}"{% endif %}>{{ date_label }}</label>
    {% with widget=widget.subwidgets.0 %}{% include "django/forms/widgets/input.html" %}{% endwith %}
    <button type="button" class="dj-picker-btn" tabindex="-1" aria-hidden="true">{% dj_icon "calendar" "dj-icon dj-icon--sm" %}</button>
  </span>
  <span class="dj-picker dj-picker--time">
    <label class="dj-visually-hidden" {% if widget.attrs.id %}for="{{ widget.subwidgets.1.attrs.id }}"{% endif %}>{{ time_label }}</label>
    {% with widget=widget.subwidgets.1 %}{% include "django/forms/widgets/input.html" %}{% endwith %}
    <button type="button" class="dj-picker-btn" tabindex="-1" aria-hidden="true">{% dj_icon "clock" "dj-icon dj-icon--sm" %}</button>
  </span>
</span>