@vcl/vcl/date-picker/demo/example-time-am-pm.html

The whole VCL in one package

<div class="date-picker" role="listbox" aria-multiselectable="false" style="width: 18em;">
  <div class="data-grid d-g-v-align-middle d-g-align-centered calendar cal-input">
  <div class="d-g-row">
      <div class="d-g-cell">
        <div class="toolbar flex row justify-between center" role="menubar" aria-level="1">
          <div class="button-dim"></div>
          <div class="cal-header-label">AM</div>
          <button type="button" class="button transparent">
            <div class="icogram">
              <span class="text">24h</span>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">12</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">1</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">2</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">3</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">4</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">5</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">6</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">7</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">8</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">9</div>
      <div class="d-g-cell cal-item selected" aria-selected="true" role="option" tabindex="0">10</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">11</div>
    </div>
    <div class="d-g-row">
        <div class="d-g-cell">
          <div class="toolbar flex row justify-between center" role="menubar" aria-level="1">
            <div class="button-dim"></div>
            <div class="cal-header-label">PM</div>
            <div class="button-dim"></div>
          </div>
        </div>
      </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">12</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">1</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">2</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">3</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">4</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">5</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">6</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">7</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">8</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">9</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">10</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">11</div>
    </div>
  </div>
</div>