Date Picker

Description

.bp-datepicker styles the native <input type="date"> element. The calendar popup is the browser’s own — no custom calendar, no JS, no accessibility work needed. accent-color themes the popup to match the DS primary color. color-scheme: light dark ensures the popup follows the page theme.

Usage

Default

Appointment date

<label class="demo-field">
<span class="demo-field__label">Appointment date</span>
<input type="date" class="bp-datepicker" />
</label>

With min / max

Select a date in 2025

<label class="demo-field">
<span class="demo-field__label">Select a date in 2025</span>
<input type="date" class="bp-datepicker"
  min="2025-01-01" max="2025-12-31" />
</label>

Date range (start + end)

From To

<div class="demo-date-range">
<label class="demo-field">
  <span class="demo-field__label">From</span>
  <input type="date" class="bp-datepicker" id="range-start" />
</label>
<label class="demo-field">
  <span class="demo-field__label">To</span>
  <input type="date" class="bp-datepicker" id="range-end" />
</label>
</div>

Disabled

Locked date

<label class="demo-field">
<span class="demo-field__label">Locked date</span>
<input type="date" class="bp-datepicker" value="2025-06-15" disabled />
</label>

Public API

Variable	Default	Description
--datepicker-border	1px solid --bp-color-border	Input border
--datepicker-radius	--bp-radius-md	Border radius
--datepicker-bg	--bp-color-bg	Background
--datepicker-color	--bp-color-text	Text color
--datepicker-accent	--bp-primary	Calendar popup accent color
--datepicker-padding	--bp-space-2 --bp-space-3	Inner padding
--datepicker-height	2.5rem	Input height

Customization

Custom accent

Custom color

<label class="demo-field">
<span class="demo-field__label">Custom color</span>
<input type="date" class="bp-datepicker demo-datepicker--teal" />
</label>

✓ No axe violations tested 2026-05-11

WCAG criteria covered:

• 1.3.1 Info & Relationships
• 1.4.3 Contrast (Min)
• 2.1.1 Keyboard
• 4.1.2 Name Role Value

Accessibility

• <input type="date"> provides full keyboard navigation, screen reader announcement, and mobile-native date pickers for free.
• Always pair with a <label> — either wrapping the input or linked via for/id.
• Use min and max attributes to constrain the valid range — the browser communicates this to assistive technology automatically.
• required + :invalid triggers the error border via CSS without JavaScript.

Browser APIs

API	Availability	Used for	Without it
<input type="date">	✓ Widely available Baseline 2020	Native calendar popup	Falls back to type="text"
accent-color	✓ Widely available Baseline 2022	Themes the calendar popup	System default accent
color-scheme	✓ Widely available Baseline 2021	Dark mode calendar popup	Popup stays in light mode

Going further — library recommendations

For requirements beyond what the native input supports (range selection, disabled dates by rule, multi-month view), these libraries share BPL DS principles — no framework coupling, CSS-customizable, progressive enhancement:

Library	Size	Why it fits
Cally	~9 KB	Web Components (<calendar-date>, <calendar-range>). Zero dependencies, no framework. Pairs with any <input>. Follows the same custom-element pattern as BPL DS.
Pikaday	~5 KB	Vanilla JS, no dependencies. Enhances an <input type="text"> progressively. Ships minimal CSS you can replace entirely with your own.
Flatpickr	~16 KB	Vanilla JS, no dependencies. Rich feature set (range, time, inline). Themeable via CSS custom properties. Widely used.

Recommended: Cally — it uses the same Web Component pattern as <bp-dropdown> and <bp-table>, so it fits naturally into BPL DS’s progressive enhancement model. Drop <calendar-date> next to .bp-datepicker and wire them together with a few lines of JS.