Datepicker

<dsx-datepicker> — Datepicker

Text input plus calendar popover that stores dates as ISO strings (yyyy-mm-dd).

Live Preview

Import

import '@bnotk/dsx/components/datepicker.js';

Usage

<dsx-datepicker value="2025-08-15" min="2025-08-01" max="2025-08-31"></dsx-datepicker>

Elements

<dsx-datepicker>

Inline date picker with formatted text input and month-view calendar overlay.

Properties

Property	Type	Default	Description
value	string	”	Selected date stored as yyyy-mm-dd.
min	string	”	Minimum selectable date as yyyy-mm-dd.
max	string	”	Maximum selectable date as yyyy-mm-dd.
placeholder	string	’dd.mm.yyyy’	Placeholder shown in the text input when no value is selected.
disabled	boolean	false	Disables the text input and calendar button.

Methods

None.

Events

Event	Detail	Description
dsx-change	{ value: string }	Bubbles/composed when a valid date is entered or a day is selected.

Slots

None.

CSS Parts

This element does not expose shadow parts.

Notes

• The text input accepts either dd.mm.yyyy or yyyy-mm-dd on the change event.
• The calendar always renders 42 day cells and starts weeks on Monday.
• Month labels use toLocaleDateString("de-DE", { month: "long", year: "numeric" }).

Behavior Notes

• Opening the calendar focuses on the month of the current value when one is present; otherwise it starts at today’s month.
• Selecting a day closes the calendar and emits dsx-change with the ISO date string.
• Dates before min or after max receive the disabled class and ignore clicks.
• The visible input value is always formatted as dd.mm.yyyy while the property remains ISO.

Styling Notes

• The control uses an inset border shadow and a focus ring with --ds2-color-focus on :focus-within.
• Calendar popover sits directly below the input wrapper and uses the standard dropdown tokens for border, surface, and shadow.
• Selected days use the main brand color; today uses bold text plus the main color.