Date and time

<div>
  <label class="form-label" for="dt-1">Due date</label>
  <div class="date-input" data-date-input>
    <div class="field">
      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
      <input id="dt-1" type="text" value="2026-10-14" placeholder="YYYY-MM-DD" inputmode="numeric" autocomplete="off" aria-haspopup="dialog">
      <button type="button" class="field-btn" aria-label="Open calendar" data-date-open><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <div class="date-pop glass" hidden role="dialog" aria-label="Choose a date">
      <div class="calendar" data-calendar data-value="2026-10-14" data-month="2026-10" data-input="dt-1">
        <div class="cal-head">
          <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Previous month" data-cal-prev><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
          <b class="cal-title" aria-live="polite">October 2026</b>
          <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Next month" data-cal-next><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
        </div>
        <div class="cal-grid" role="group" aria-label="October 2026">
          <span class="cal-dow" aria-hidden="true">Mo</span><span class="cal-dow" aria-hidden="true">Tu</span><span class="cal-dow" aria-hidden="true">We</span><span class="cal-dow" aria-hidden="true">Th</span><span class="cal-dow" aria-hidden="true">Fr</span><span class="cal-dow" aria-hidden="true">Sa</span><span class="cal-dow" aria-hidden="true">Su</span><button type="button" class="cal-day out" data-date="2026-09-28" aria-pressed="false" aria-label="28 September 2026" tabindex="-1">28</button><button type="button" class="cal-day out" data-date="2026-09-29" aria-pressed="false" aria-label="29 September 2026" tabindex="-1">29</button><button type="button" class="cal-day out" data-date="2026-09-30" aria-pressed="false" aria-label="30 September 2026" tabindex="-1">30</button><button type="button" class="cal-day" data-date="2026-10-01" aria-pressed="false" aria-label="1 October 2026" tabindex="-1">1</button><button type="button" class="cal-day" data-date="2026-10-02" aria-pressed="false" aria-label="2 October 2026" tabindex="-1">2</button><button type="button" class="cal-day" data-date="2026-10-03" aria-pressed="false" aria-label="3 October 2026" tabindex="-1">3</button><button type="button" class="cal-day" data-date="2026-10-04" aria-pressed="false" aria-label="4 October 2026" tabindex="-1">4</button><button type="button" class="cal-day" data-date="2026-10-05" aria-pressed="false" aria-label="5 October 2026" tabindex="-1">5</button><button type="button" class="cal-day" data-date="2026-10-06" aria-pressed="false" aria-label="6 October 2026" tabindex="-1">6</button><button type="button" class="cal-day" data-date="2026-10-07" aria-pressed="false" aria-label="7 October 2026" tabindex="-1">7</button><button type="button" class="cal-day" data-date="2026-10-08" aria-pressed="false" aria-label="8 October 2026" tabindex="-1">8</button><button type="button" class="cal-day" data-date="2026-10-09" aria-pressed="false" aria-label="9 October 2026" tabindex="-1">9</button><button type="button" class="cal-day" data-date="2026-10-10" aria-pressed="false" aria-label="10 October 2026" tabindex="-1">10</button><button type="button" class="cal-day" data-date="2026-10-11" aria-pressed="false" aria-label="11 October 2026" tabindex="-1">11</button><button type="button" class="cal-day" data-date="2026-10-12" aria-pressed="false" aria-label="12 October 2026" tabindex="-1">12</button><button type="button" class="cal-day" data-date="2026-10-13" aria-pressed="false" aria-label="13 October 2026" tabindex="-1">13</button><button type="button" class="cal-day" data-date="2026-10-14" aria-pressed="true" aria-label="14 October 2026" tabindex="0">14</button><button type="button" class="cal-day" data-date="2026-10-15" aria-pressed="false" aria-label="15 October 2026" tabindex="-1">15</button><button type="button" class="cal-day" data-date="2026-10-16" aria-pressed="false" aria-label="16 October 2026" tabindex="-1">16</button><button type="button" class="cal-day" data-date="2026-10-17" aria-pressed="false" aria-label="17 October 2026" tabindex="-1">17</button><button type="button" class="cal-day" data-date="2026-10-18" aria-pressed="false" aria-label="18 October 2026" tabindex="-1">18</button><button type="button" class="cal-day" data-date="2026-10-19" aria-pressed="false" aria-label="19 October 2026" tabindex="-1">19</button><button type="button" class="cal-day" data-date="2026-10-20" aria-pressed="false" aria-label="20 October 2026" tabindex="-1">20</button><button type="button" class="cal-day" data-date="2026-10-21" aria-pressed="false" aria-label="21 October 2026" tabindex="-1">21</button><button type="button" class="cal-day" data-date="2026-10-22" aria-pressed="false" aria-label="22 October 2026" tabindex="-1">22</button><button type="button" class="cal-day" data-date="2026-10-23" aria-pressed="false" aria-label="23 October 2026" tabindex="-1">23</button><button type="button" class="cal-day" data-date="2026-10-24" aria-pressed="false" aria-label="24 October 2026" tabindex="-1">24</button><button type="button" class="cal-day" data-date="2026-10-25" aria-pressed="false" aria-label="25 October 2026" tabindex="-1">25</button><button type="button" class="cal-day" data-date="2026-10-26" aria-pressed="false" aria-label="26 October 2026" tabindex="-1">26</button><button type="button" class="cal-day" data-date="2026-10-27" aria-pressed="false" aria-label="27 October 2026" tabindex="-1">27</button><button type="button" class="cal-day" data-date="2026-10-28" aria-pressed="false" aria-label="28 October 2026" tabindex="-1">28</button><button type="button" class="cal-day" data-date="2026-10-29" aria-pressed="false" aria-label="29 October 2026" tabindex="-1">29</button><button type="button" class="cal-day" data-date="2026-10-30" aria-pressed="false" aria-label="30 October 2026" tabindex="-1">30</button><button type="button" class="cal-day" data-date="2026-10-31" aria-pressed="false" aria-label="31 October 2026" tabindex="-1">31</button><button type="button" class="cal-day out" data-date="2026-11-01" aria-pressed="false" aria-label="1 November 2026" tabindex="-1">1</button><button type="button" class="cal-day out" data-date="2026-11-02" aria-pressed="false" aria-label="2 November 2026" tabindex="-1">2</button><button type="button" class="cal-day out" data-date="2026-11-03" aria-pressed="false" aria-label="3 November 2026" tabindex="-1">3</button><button type="button" class="cal-day out" data-date="2026-11-04" aria-pressed="false" aria-label="4 November 2026" tabindex="-1">4</button><button type="button" class="cal-day out" data-date="2026-11-05" aria-pressed="false" aria-label="5 November 2026" tabindex="-1">5</button><button type="button" class="cal-day out" data-date="2026-11-06" aria-pressed="false" aria-label="6 November 2026" tabindex="-1">6</button><button type="button" class="cal-day out" data-date="2026-11-07" aria-pressed="false" aria-label="7 November 2026" tabindex="-1">7</button><button type="button" class="cal-day out" data-date="2026-11-08" aria-pressed="false" aria-label="8 November 2026" tabindex="-1">8</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="calendar" data-calendar data-value="2026-10-14" data-month="2026-10">
  <div class="cal-head">
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Previous month" data-cal-prev><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    <b class="cal-title" aria-live="polite">October 2026</b>
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Next month" data-cal-next><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <div class="cal-grid" role="group" aria-label="October 2026">
    <span class="cal-dow" aria-hidden="true">Mo</span><span class="cal-dow" aria-hidden="true">Tu</span><span class="cal-dow" aria-hidden="true">We</span><span class="cal-dow" aria-hidden="true">Th</span><span class="cal-dow" aria-hidden="true">Fr</span><span class="cal-dow" aria-hidden="true">Sa</span><span class="cal-dow" aria-hidden="true">Su</span><button type="button" class="cal-day out" data-date="2026-09-28" aria-pressed="false" aria-label="28 September 2026" tabindex="-1">28</button><button type="button" class="cal-day out" data-date="2026-09-29" aria-pressed="false" aria-label="29 September 2026" tabindex="-1">29</button><button type="button" class="cal-day out" data-date="2026-09-30" aria-pressed="false" aria-label="30 September 2026" tabindex="-1">30</button><button type="button" class="cal-day" data-date="2026-10-01" aria-pressed="false" aria-label="1 October 2026" tabindex="-1">1</button><button type="button" class="cal-day" data-date="2026-10-02" aria-pressed="false" aria-label="2 October 2026" tabindex="-1">2</button><button type="button" class="cal-day" data-date="2026-10-03" aria-pressed="false" aria-label="3 October 2026" tabindex="-1">3</button><button type="button" class="cal-day" data-date="2026-10-04" aria-pressed="false" aria-label="4 October 2026" tabindex="-1">4</button><button type="button" class="cal-day" data-date="2026-10-05" aria-pressed="false" aria-label="5 October 2026" tabindex="-1">5</button><button type="button" class="cal-day" data-date="2026-10-06" aria-pressed="false" aria-label="6 October 2026" tabindex="-1">6</button><button type="button" class="cal-day" data-date="2026-10-07" aria-pressed="false" aria-label="7 October 2026" tabindex="-1">7</button><button type="button" class="cal-day" data-date="2026-10-08" aria-pressed="false" aria-label="8 October 2026" tabindex="-1">8</button><button type="button" class="cal-day" data-date="2026-10-09" aria-pressed="false" aria-label="9 October 2026" tabindex="-1">9</button><button type="button" class="cal-day" data-date="2026-10-10" aria-pressed="false" aria-label="10 October 2026" tabindex="-1">10</button><button type="button" class="cal-day" data-date="2026-10-11" aria-pressed="false" aria-label="11 October 2026" tabindex="-1">11</button><button type="button" class="cal-day" data-date="2026-10-12" aria-pressed="false" aria-label="12 October 2026" tabindex="-1">12</button><button type="button" class="cal-day" data-date="2026-10-13" aria-pressed="false" aria-label="13 October 2026" tabindex="-1">13</button><button type="button" class="cal-day" data-date="2026-10-14" aria-pressed="true" aria-label="14 October 2026" tabindex="0">14</button><button type="button" class="cal-day" data-date="2026-10-15" aria-pressed="false" aria-label="15 October 2026" tabindex="-1">15</button><button type="button" class="cal-day" data-date="2026-10-16" aria-pressed="false" aria-label="16 October 2026" tabindex="-1">16</button><button type="button" class="cal-day" data-date="2026-10-17" aria-pressed="false" aria-label="17 October 2026" tabindex="-1">17</button><button type="button" class="cal-day" data-date="2026-10-18" aria-pressed="false" aria-label="18 October 2026" tabindex="-1">18</button><button type="button" class="cal-day" data-date="2026-10-19" aria-pressed="false" aria-label="19 October 2026" tabindex="-1">19</button><button type="button" class="cal-day" data-date="2026-10-20" aria-pressed="false" aria-label="20 October 2026" tabindex="-1">20</button><button type="button" class="cal-day" data-date="2026-10-21" aria-pressed="false" aria-label="21 October 2026" tabindex="-1">21</button><button type="button" class="cal-day" data-date="2026-10-22" aria-pressed="false" aria-label="22 October 2026" tabindex="-1">22</button><button type="button" class="cal-day" data-date="2026-10-23" aria-pressed="false" aria-label="23 October 2026" tabindex="-1">23</button><button type="button" class="cal-day" data-date="2026-10-24" aria-pressed="false" aria-label="24 October 2026" tabindex="-1">24</button><button type="button" class="cal-day" data-date="2026-10-25" aria-pressed="false" aria-label="25 October 2026" tabindex="-1">25</button><button type="button" class="cal-day" data-date="2026-10-26" aria-pressed="false" aria-label="26 October 2026" tabindex="-1">26</button><button type="button" class="cal-day" data-date="2026-10-27" aria-pressed="false" aria-label="27 October 2026" tabindex="-1">27</button><button type="button" class="cal-day" data-date="2026-10-28" aria-pressed="false" aria-label="28 October 2026" tabindex="-1">28</button><button type="button" class="cal-day" data-date="2026-10-29" aria-pressed="false" aria-label="29 October 2026" tabindex="-1">29</button><button type="button" class="cal-day" data-date="2026-10-30" aria-pressed="false" aria-label="30 October 2026" tabindex="-1">30</button><button type="button" class="cal-day" data-date="2026-10-31" aria-pressed="false" aria-label="31 October 2026" tabindex="-1">31</button><button type="button" class="cal-day out" data-date="2026-11-01" aria-pressed="false" aria-label="1 November 2026" tabindex="-1">1</button><button type="button" class="cal-day out" data-date="2026-11-02" aria-pressed="false" aria-label="2 November 2026" tabindex="-1">2</button><button type="button" class="cal-day out" data-date="2026-11-03" aria-pressed="false" aria-label="3 November 2026" tabindex="-1">3</button><button type="button" class="cal-day out" data-date="2026-11-04" aria-pressed="false" aria-label="4 November 2026" tabindex="-1">4</button><button type="button" class="cal-day out" data-date="2026-11-05" aria-pressed="false" aria-label="5 November 2026" tabindex="-1">5</button><button type="button" class="cal-day out" data-date="2026-11-06" aria-pressed="false" aria-label="6 November 2026" tabindex="-1">6</button><button type="button" class="cal-day out" data-date="2026-11-07" aria-pressed="false" aria-label="7 November 2026" tabindex="-1">7</button><button type="button" class="cal-day out" data-date="2026-11-08" aria-pressed="false" aria-label="8 November 2026" tabindex="-1">8</button>
  </div>
</div>

<div class="calendar" data-calendar data-value="2026-10-08" data-month="2026-10" data-range="2026-10-08,2026-10-15">
  <div class="cal-head">
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Previous month" data-cal-prev><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    <b class="cal-title" aria-live="polite">October 2026</b>
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Next month" data-cal-next><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <div class="cal-grid" role="group" aria-label="October 2026">
    <span class="cal-dow" aria-hidden="true">Mo</span><span class="cal-dow" aria-hidden="true">Tu</span><span class="cal-dow" aria-hidden="true">We</span><span class="cal-dow" aria-hidden="true">Th</span><span class="cal-dow" aria-hidden="true">Fr</span><span class="cal-dow" aria-hidden="true">Sa</span><span class="cal-dow" aria-hidden="true">Su</span><button type="button" class="cal-day out" data-date="2026-09-28" aria-pressed="false" aria-label="28 September 2026" tabindex="-1">28</button><button type="button" class="cal-day out" data-date="2026-09-29" aria-pressed="false" aria-label="29 September 2026" tabindex="-1">29</button><button type="button" class="cal-day out" data-date="2026-09-30" aria-pressed="false" aria-label="30 September 2026" tabindex="-1">30</button><button type="button" class="cal-day" data-date="2026-10-01" aria-pressed="false" aria-label="1 October 2026" tabindex="-1">1</button><button type="button" class="cal-day" data-date="2026-10-02" aria-pressed="false" aria-label="2 October 2026" tabindex="-1">2</button><button type="button" class="cal-day" data-date="2026-10-03" aria-pressed="false" aria-label="3 October 2026" tabindex="-1">3</button><button type="button" class="cal-day" data-date="2026-10-04" aria-pressed="false" aria-label="4 October 2026" tabindex="-1">4</button><button type="button" class="cal-day" data-date="2026-10-05" aria-pressed="false" aria-label="5 October 2026" tabindex="-1">5</button><button type="button" class="cal-day" data-date="2026-10-06" aria-pressed="false" aria-label="6 October 2026" tabindex="-1">6</button><button type="button" class="cal-day" data-date="2026-10-07" aria-pressed="false" aria-label="7 October 2026" tabindex="-1">7</button><button type="button" class="cal-day in-range range-end" data-date="2026-10-08" aria-pressed="true" aria-label="8 October 2026" tabindex="0">8</button><button type="button" class="cal-day in-range" data-date="2026-10-09" aria-pressed="false" aria-label="9 October 2026" tabindex="-1">9</button><button type="button" class="cal-day in-range" data-date="2026-10-10" aria-pressed="false" aria-label="10 October 2026" tabindex="-1">10</button><button type="button" class="cal-day in-range" data-date="2026-10-11" aria-pressed="false" aria-label="11 October 2026" tabindex="-1">11</button><button type="button" class="cal-day in-range" data-date="2026-10-12" aria-pressed="false" aria-label="12 October 2026" tabindex="-1">12</button><button type="button" class="cal-day in-range" data-date="2026-10-13" aria-pressed="false" aria-label="13 October 2026" tabindex="-1">13</button><button type="button" class="cal-day in-range" data-date="2026-10-14" aria-pressed="false" aria-label="14 October 2026" tabindex="-1">14</button><button type="button" class="cal-day in-range range-end" data-date="2026-10-15" aria-pressed="true" aria-label="15 October 2026" tabindex="-1">15</button><button type="button" class="cal-day" data-date="2026-10-16" aria-pressed="false" aria-label="16 October 2026" tabindex="-1">16</button><button type="button" class="cal-day" data-date="2026-10-17" aria-pressed="false" aria-label="17 October 2026" tabindex="-1">17</button><button type="button" class="cal-day" data-date="2026-10-18" aria-pressed="false" aria-label="18 October 2026" tabindex="-1">18</button><button type="button" class="cal-day" data-date="2026-10-19" aria-pressed="false" aria-label="19 October 2026" tabindex="-1">19</button><button type="button" class="cal-day" data-date="2026-10-20" aria-pressed="false" aria-label="20 October 2026" tabindex="-1">20</button><button type="button" class="cal-day" data-date="2026-10-21" aria-pressed="false" aria-label="21 October 2026" tabindex="-1">21</button><button type="button" class="cal-day" data-date="2026-10-22" aria-pressed="false" aria-label="22 October 2026" tabindex="-1">22</button><button type="button" class="cal-day" data-date="2026-10-23" aria-pressed="false" aria-label="23 October 2026" tabindex="-1">23</button><button type="button" class="cal-day" data-date="2026-10-24" aria-pressed="false" aria-label="24 October 2026" tabindex="-1">24</button><button type="button" class="cal-day" data-date="2026-10-25" aria-pressed="false" aria-label="25 October 2026" tabindex="-1">25</button><button type="button" class="cal-day" data-date="2026-10-26" aria-pressed="false" aria-label="26 October 2026" tabindex="-1">26</button><button type="button" class="cal-day" data-date="2026-10-27" aria-pressed="false" aria-label="27 October 2026" tabindex="-1">27</button><button type="button" class="cal-day" data-date="2026-10-28" aria-pressed="false" aria-label="28 October 2026" tabindex="-1">28</button><button type="button" class="cal-day" data-date="2026-10-29" aria-pressed="false" aria-label="29 October 2026" tabindex="-1">29</button><button type="button" class="cal-day" data-date="2026-10-30" aria-pressed="false" aria-label="30 October 2026" tabindex="-1">30</button><button type="button" class="cal-day" data-date="2026-10-31" aria-pressed="false" aria-label="31 October 2026" tabindex="-1">31</button><button type="button" class="cal-day out" data-date="2026-11-01" aria-pressed="false" aria-label="1 November 2026" tabindex="-1">1</button><button type="button" class="cal-day out" data-date="2026-11-02" aria-pressed="false" aria-label="2 November 2026" tabindex="-1">2</button><button type="button" class="cal-day out" data-date="2026-11-03" aria-pressed="false" aria-label="3 November 2026" tabindex="-1">3</button><button type="button" class="cal-day out" data-date="2026-11-04" aria-pressed="false" aria-label="4 November 2026" tabindex="-1">4</button><button type="button" class="cal-day out" data-date="2026-11-05" aria-pressed="false" aria-label="5 November 2026" tabindex="-1">5</button><button type="button" class="cal-day out" data-date="2026-11-06" aria-pressed="false" aria-label="6 November 2026" tabindex="-1">6</button><button type="button" class="cal-day out" data-date="2026-11-07" aria-pressed="false" aria-label="7 November 2026" tabindex="-1">7</button><button type="button" class="cal-day out" data-date="2026-11-08" aria-pressed="false" aria-label="8 November 2026" tabindex="-1">8</button>
  </div>
</div>

<div><label class="form-label" for="dt-2">Date</label><input id="dt-2" name="dt-2" type="date" value="2026-10-14" class="form-control"></div>
<div><label class="form-label" for="dt-3">Time</label><input id="dt-3" name="dt-3" type="time" value="09:30" class="form-control"></div>