# Date range · MIAN

Pick a period for a report: presets for the common ranges and two dates for anything else.

- Id: `date-range` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/date-range
- Use for: date range picker, report period, last 30 days filter, from and to dates.
- Alternatives: calendar, filter-bar.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

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

## Examples

### Report period

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

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/date-range/source