Date range
Pick a period for a report: presets for the common ranges and two dates for anything else.
Report period
to
<div class="mn-daterange" data-mn-daterange>
<div class="mn-toggle-group" role="group" aria-label="Period"><button type="button" data-mn-range="7" aria-pressed="false">7 days</button><button type="button" data-mn-range="30" aria-pressed="true">30 days</button><button type="button" data-mn-range="90" aria-pressed="false">90 days</button></div>
<div class="mn-daterange-custom"><input class="mn-input mn-input-sm" type="date" aria-label="From"><span>to</span><input class="mn-input mn-input-sm" type="date" aria-label="To"></div>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/date-range.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-daterange | The control. Add data-mn-daterange. |
| data-mn-range | On a preset button: the number of days, ending today. |
| mn-daterange-custom | The two date inputs. |
Accessibility
- Presets are toggle buttons (aria-pressed) in a labelled group.
- Both dates are native date inputs with their own labels, so they work with any keyboard and locale.
- Listen for mn:change; detail has from, to and days.