Date picker

Overview

Three layers: .calendar-day cells, a .calendar grid, and .date-picker which wraps a field + trigger + panel. Panel visibility uses .date-picker--open. There is no bundled DatePicker runtime in the npm package: only styles and the HTML contract below.

Prerequisites

• PimentCSS installed, Installation.
• Input fields, .label, .field, .field-group from Input fields.
• Focus, :focus-visible rings on days and nav buttons.

Calendar days

Days are <button type="button"> except weekday headers and leading blanks (span). Modifiers --selected, --current, --disabled, and doc-only --hover / --focus show spec states.

Day states (spec)

Static modifiers for documentation; interactive days use real buttons below.

Calendar

Stack header (month + optional prev/next), weekday row, then .calendar__week rows. Max width 240px, 12px padding, 8px gap between cells.

<div class="calendar" role="application" aria-label="May 2026">
  <div class="calendar__header">…</div>
  <div class="calendar__weekdays">…</div>
  <div class="calendar__weeks">
    <div class="calendar__week">…</div>
  </div>
</div>

Full month example

Behavior in your app

Copy and adapt the script in docs-site/src/lib/date-picker-behavior.ts after PimentCSS CSS is loaded. It toggles the panel, renders months from the current month forward (previous month disabled), disables past days in the current month, and closes on Escape or outside click.

// See docs-site/src/lib/date-picker-behavior.ts (month nav, min = current month, field-group layout).

Date picker

Combines .field-group, readonly text input, calendar trigger button, and .date-picker__panel. Add .date-picker--open (via JS) to reveal the panel. Demos on this page are wired with the script above.

<div class="date-picker date-picker--open">
  <div class="date-picker__body">
    <div class="field-group">…</div>
    <div class="date-picker__panel">
      <div class="calendar" role="dialog">…</div>
    </div>
  </div>
  <p class="date-picker__hint">dd/mm/yyyy</p>
</div>

Example (closed)

Click the calendar button to open the panel, then pick a day. Requires the behavior script (included on this docs site).

Open state (spec)

Markup with date-picker--open for screenshots; the same script can toggle it closed.

Class reference

Customize (Sass)

1. 01

   Calendar sizing

   Override picker width and cell size before importing components.
   variables

   @use "pimentcss-design-system" with (
     $date-picker-width: 16rem,
     $calendar-day-size: 1.625rem,
     $calendar-gap: 0.375rem
   );

2. 02

   Rebuild CSS

   Run after editing _date-picker.scss or tokens.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps