Skip to content

Soracom

Design System
Home Design System Ux Patterns Datetime Panel

Datetime Panel

A combined datetime panel for selecting and filtering dates/times

Overview 

The ds-datetime-panel component provides the layout/arrangement of a panel containing date/time pickers for filtering or searching.

ds-datetime-panel is designed to work as the menu contents of a ds-menubutton

Basic usage 

The basic building blocks of ds-datetime-panel are as follows:

Class Required? Description
ds-datetime-panel The top-most level container.
__range The container for the From/To datetime-split components.
__recent The container for the menu of recently used times.
__relative The container for the menu of relative times.
<details class="ds-menubutton">
  <summary>
    <span class="ds-button --icon-time">
      <span class="ds-text --addon">Filter</span>
      <span>Last 30 minutes</span>
      <i class="ds-icon --icon-ui-arrow-down"></i>
    </span>
  </summary>
  <div class="__content ds-datetime-panel">
    <div class="__range">
      <p class="ds-text --label">Absolute times</p>
      <div class="ds-field">
        <label for="from" class="ds-text --label --no-case">From</label>
        <div class="ds-input --datetime-split">
          <input id="from" type="date" name="test" /><input type="time" name="test" />
        </div>
      </div>
      <div class="ds-field">
        <label for="to" class="ds-text --label --no-case">To</label>
        <div class="ds-input --datetime-split">
          <input id="to" type="date" name="test" /><input type="time" name="test" />
        </div>
      </div>
      <button class="ds-button --primary --small">
        <span>Apply</span>
      </button>
    </div>
    <div class="__recent">
      <p class="ds-text --label">Recently used times</p>
      <ul>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
      </ul>
    </div>
    <div class="__relative">
      <p class="ds-text --label">Relative times</p>
      <ul>
        <li>
          <a href="#">Last 5 minutes</a>
        </li>
        <li>
          <a href="#">Last 15 minutes</a>
        </li>
        <li>
          <a href="#">Last 30 minutes</a>
        </li>
        <li>
          <a href="#">Last 1 hour</a>
        </li>
        <li>
          <a href="#">Last 3 hours</a>
        </li>
        <li>
          <a href="#">Last 6 hours</a>
        </li>
        <li>
          <a href="#">Last 12 hours</a>
        </li>
        <li>
          <a href="#">Last 24 hours</a>
        </li>
        <li>
          <a href="#">Last 2 days</a>
        </li>
        <li>
          <a href="#">Last 7 days</a>
        </li>
      </ul>
    </div>
  </div>
</details>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<details class="ds-menubutton">
  <summary>
    <span class="ds-button --icon-time">
      <span class="ds-text --addon">Filter</span>
      <span>Last 30 minutes</span>
      <i class="ds-icon --icon-ui-arrow-down"></i>
    </span>
  </summary>
  <div class="__content ds-datetime-panel">
    <div class="__range">
      <p class="ds-text --label">Absolute times</p>
      <div class="ds-field">
        <label for="from" class="ds-text --label --no-case">From</label>
        <div class="ds-input --datetime-split">
          <input id="from" type="date" name="test" /><input type="time" name="test" />
        </div>
      </div>
      <div class="ds-field">
        <label for="to" class="ds-text --label --no-case">To</label>
        <div class="ds-input --datetime-split">
          <input id="to" type="date" name="test" /><input type="time" name="test" />
        </div>
      </div>
      <button class="ds-button --primary --small">
        <span>Apply</span>
      </button>
    </div>
    <div class="__recent">
      <p class="ds-text --label">Recently used times</p>
      <ul>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
      </ul>
    </div>
    <div class="__relative">
      <p class="ds-text --label">Relative times</p>
      <ul>
        <li>
          <a href="#">Last 5 minutes</a>
        </li>
        <li>
          <a href="#">Last 15 minutes</a>
        </li>
        <li>
          <a href="#">Last 30 minutes</a>
        </li>
        <li>
          <a href="#">Last 1 hour</a>
        </li>
        <li>
          <a href="#">Last 3 hours</a>
        </li>
        <li>
          <a href="#">Last 6 hours</a>
        </li>
        <li>
          <a href="#">Last 12 hours</a>
        </li>
        <li>
          <a href="#">Last 24 hours</a>
        </li>
        <li>
          <a href="#">Last 2 days</a>
        </li>
        <li>
          <a href="#">Last 7 days</a>
        </li>
      </ul>
    </div>
  </div>
</details>

Tests 

<details class="ds-menubutton" open>
  <summary>
    <span class="ds-button --icon-time">
      <span class="ds-text --addon">Filter</span>
      <span>Last 30 minutes</span>
      <i class="ds-icon --icon-ui-arrow-down"></i>
    </span>
  </summary>
  <div class="__content ds-datetime-panel">
    <div class="__range">
      <p class="ds-text --label">Absolute times</p>
      <div class="ds-field">
        <label for="from" class="ds-text --label --no-case">From</label>
        <div class="ds-input --datetime-split">
          <input id="from" type="date" name="test" /><input type="time" name="test" />
        </div>
      </div>
      <div class="ds-field">
        <label for="to" class="ds-text --label --no-case">To</label>
        <div class="ds-input --datetime-split">
          <input id="to" type="date" name="test" /><input type="time" name="test" />
        </div>
      </div>
      <button class="ds-button --primary --small">
        <span>Apply</span>
      </button>
    </div>
    <div class="__recent">
      <p class="ds-text --label">Recently used times</p>
      <ul>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
      </ul>
    </div>
    <div class="__relative">
      <p class="ds-text --label">Relative times</p>
      <ul>
        <li>
          <a href="#">Last 5 minutes</a>
        </li>
        <li>
          <a href="#">Last 15 minutes</a>
        </li>
        <li>
          <a href="#">Last 30 minutes</a>
        </li>
        <li>
          <a href="#">Last 1 hour</a>
        </li>
        <li>
          <a href="#">Last 3 hours</a>
        </li>
        <li>
          <a href="#">Last 6 hours</a>
        </li>
        <li>
          <a href="#">Last 12 hours</a>
        </li>
        <li>
          <a href="#">Last 24 hours</a>
        </li>
        <li>
          <a href="#">Last 2 days</a>
        </li>
        <li>
          <a href="#">Last 7 days</a>
        </li>
      </ul>
    </div>
  </div>
</details>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<details class="ds-menubutton" open>
  <summary>
    <span class="ds-button --icon-time">
      <span class="ds-text --addon">Filter</span>
      <span>Last 30 minutes</span>
      <i class="ds-icon --icon-ui-arrow-down"></i>
    </span>
  </summary>
  <div class="__content ds-datetime-panel">
    <div class="__range">
      <p class="ds-text --label">Absolute times</p>
      <div class="ds-field">
        <label for="from" class="ds-text --label --no-case">From</label>
        <div class="ds-input --datetime-split">
          <input id="from" type="date" name="test" /><input type="time" name="test" />
        </div>
      </div>
      <div class="ds-field">
        <label for="to" class="ds-text --label --no-case">To</label>
        <div class="ds-input --datetime-split">
          <input id="to" type="date" name="test" /><input type="time" name="test" />
        </div>
      </div>
      <button class="ds-button --primary --small">
        <span>Apply</span>
      </button>
    </div>
    <div class="__recent">
      <p class="ds-text --label">Recently used times</p>
      <ul>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
        <li>
          <a href="#">2021-05-10 21:45 to 2021-05-10 22:45</a>
        </li>
      </ul>
    </div>
    <div class="__relative">
      <p class="ds-text --label">Relative times</p>
      <ul>
        <li>
          <a href="#">Last 5 minutes</a>
        </li>
        <li>
          <a href="#">Last 15 minutes</a>
        </li>
        <li>
          <a href="#">Last 30 minutes</a>
        </li>
        <li>
          <a href="#">Last 1 hour</a>
        </li>
        <li>
          <a href="#">Last 3 hours</a>
        </li>
        <li>
          <a href="#">Last 6 hours</a>
        </li>
        <li>
          <a href="#">Last 12 hours</a>
        </li>
        <li>
          <a href="#">Last 24 hours</a>
        </li>
        <li>
          <a href="#">Last 2 days</a>
        </li>
        <li>
          <a href="#">Last 7 days</a>
        </li>
      </ul>
    </div>
  </div>
</details>