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>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>