Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Date picker

A popover calendar over a native date input: month and year menus, a keyboard grid (arrows, Home, End, Page Up and Page Down), min and max, disabled dates, and month names and week start from the locale. Needs monsoon.js.

Interactive11 classesNeeds monsoon.jsLight and dark

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

Full

JavaScript API

Attribute

data-m-datepicker

Options

OptionDescription
data-m-datepicker-locale="pt-BR"
data-m-datepicker-week-start="1"
data-m-datepicker-disabled="sat,sun,2026-12-25"
data-m-datepicker-presets="today,7d,30d,month"
min and max on the input

Methods

MethodDescription
Monsoon.datepicker(el).open()
Monsoon.datepicker(el).close()
Monsoon.datepicker(el).value
Monsoon.datepicker(el).value = "2026-10-20"

Events

EventDescription
monsoon:change { value }
input and change on the native input

Classes

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

ClassTypeWhat it does
Base Base class of the date picker. On a <div> in the example. Sets flex display, alignment, gap, width, padding and hidden by default.
CSS
.datepicker > .input {
  flex: 1 1 0%;
  min-width: 0;
}

.datepicker:has(> .datepicker-toggle) > .input::-webkit-calendar-picker-indicator {
  display: none;
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets absolute position, offsets, grid display, alignment, width and text color.
CSS
.datepicker-toggle:focus-visible {
  outline: var(--m-ring);
  outline-offset: calc(-2 * var(--m-ring-width));
}

.datepicker-toggle:hover,
.combobox-toggle:hover,
.datepicker-toggle[aria-expanded=true] {
  color: var(--foreground);
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets fixed position, offsets, stacking order, margin, padding and overflow, and --tone and --tone-fg.
CSS
.datepicker-panel:popover-open {
  display: flex;
}

.datepicker-panel:not([popover]) {
  display: flex;
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets width.
CSS
.datepicker-calendar {
  width: 17.5rem;
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets flex display, alignment, gap, margin, width and padding.
CSS
.datepicker-header > .select + .select {
  flex: 0 0 5.25rem;
}

.datepicker-header {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: .5rem;
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets generated content, width, height, background and transform.
CSS
.datepicker-prev:dir(rtl)::before, .datepicker-next:dir(rtl)::before {
  scale: -1 1;
}

.datepicker-prev::before, .datepicker-next::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  mask: var(--m-ix-left) center / contain no-repeat;
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets generated content, width, height, background and transform.
CSS
.datepicker-next::before {
  mask-image: var(--m-ix-right);
}

.datepicker-prev:dir(rtl)::before, .datepicker-next:dir(rtl)::before {
  scale: -1 1;
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets width, border, height, padding, text size and font weight.
CSS
.datepicker-grid td {
  padding: 0;
  text-align: center;
}

.datepicker-grid td[data-range-start][data-range-end] {
  background: none;
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets border, inline-grid display, alignment, width, height and text size.
CSS
.datepicker-day:hover {
  background-color: var(--muted);
}

.datepicker-day[aria-current=date] {
  font-weight: 700;
  color: var(--tone);
}
Part Part of the date picker. On an <input> in the example. Sets block display, width, height, padding, text size and text style, and 9 custom properties.
CSS
.input-group > .input, .input-group > .select {
  flex: 1 1 0%;
  width: auto;
}

.input::-webkit-calendar-picker-indicator:hover {
  background: var(--foreground);
}
Modifier Modifier, combined with the datepicker class. Not used in the example above. Sets block display, width, height, padding, text size and text style, and 9 custom properties.
CSS
.select:dir(rtl) {
  background-position: left calc(var(--field-px, .75rem) - .125rem) center;
}

.input,
.select,
.textarea,
.file-input,
.color-input,
.otp-input,
.otp-field {
  --tone: var(--field-tone, var(--ring));
}

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.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Date picker: start from the base class, then add modifiers -->
<div class="grid gap-4 max-w-xs">
  <div class="field">
    <label class="label" for="dp-delivery">Delivery date</label>
    <div class="datepicker" data-m-datepicker data-m-datepicker-disabled="sun">
      <input type="date" id="dp-delivery" class="input" value="2026-10-16" min="2026-10-01" max="2027-03-31">
    </div>
    <p class="hint">Sundays are closed.</p>
  </div>
  <div class="datepicker" data-m-datepicker data-m-datepicker-locale="de-DE">
    <input type="date" class="input input-sm" value="2026-11-03" aria-label="Termin">
  </div>
</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 label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-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 -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
InteractiveDate range pickerTwo 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.InteractiveComboboxFilter as you type over a native select or an input with a datalist, following the WAI-ARIA combobox pattern. Matches are highlighted, accents are ignored and option groups are kept. Needs monsoon.js.InteractiveMulti select comboboxOn a select with multiple the combobox shows the picks as chips. Backspace in the empty field removes the last one and the listbox stays open while you pick. Needs monsoon.js.InteractiveSelect (custom)A fully custom select over a native one, which stays in the form with its value and change events in sync. Options can carry an icon, an image, a color or a description, optgroups become headings, long lists get a search box, multiple shows chips, and it can be clearable. Keyboard and screen readers follow the WAI-ARIA select only combobox pattern, and the size, tone and variant classes of .select carry over. Needs monsoon.js.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.