Interactive
Date range picker
Two date inputs in one .datepicker pick a range: the first click sets the start, the second the end, with the days between highlighted and presets such as Last 7 days. Needs monsoon.js.
Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.
Example
<div class="datepicker max-w-md" data-m-datepicker data-m-datepicker-presets="today,7d,30d,month,last-month">
<input type="date" class="input" name="from" value="2026-10-01" aria-label="Start date">
<input type="date" class="input" name="to" value="2026-10-13" aria-label="End date">
</div>JavaScript API
Attribute
data-m-datepicker
Options
| Option | Description |
|---|---|
data-m-datepicker-presets="today,yesterday,7d,30d,90d,month,last-month,year" | |
any "Nd" preset means the last N days |
Methods
| Method | Description |
|---|---|
Monsoon.datepicker(el).value | |
Monsoon.datepicker(el).value = ["2026-10-01", "2026-10-13"] |
Events
| Event | Description |
|---|---|
monsoon:change { start, end } |
Classes
4 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the date range picker. On a <div> in the example. Sets flex display, alignment, gap, width, padding and hidden by default.CSS |
|
| Modifier | Modifier, combined with the datepicker class. Not used in the example above. Sets alignment, width, height, background and transform.CSS |
|
| Modifier | Modifier, combined with the datepicker class. Not used in the example above. Sets flex display, alignment, gap, width, padding and border.CSS |
|
| Modifier | Modifier, combined with the datepicker class. Not used in the example above. Sets padding, text size, text style, text color, corner radius and pointer cursor.CSS |
Usage
The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>
<!-- Date range picker: start from the base class, then add modifiers -->
<div class="datepicker max-w-md" data-m-datepicker data-m-datepicker-presets="today,7d,30d,month,last-month">
<input type="date" class="input" name="from" value="2026-10-01" aria-label="Start date">
<input type="date" class="input" name="to" value="2026-10-13" aria-label="End date">
</div>Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.
Accessibility
- Give every control a visible
labellinked withfor, or anaria-labelwhen the purpose is obvious from context. Link help and error text witharia-describedby; invalid styles use:user-invalid, so they appear only after the user interacts. - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.