Date & time

`<kern-date-range-picker>`

Date range field: two dates („Von“ – „Bis“) with a calendar popover (two months, one on narrow screens), form-associated. start and end are ISO dates; value and the form value are the ISO 8601 interval start/end (empty until both are set). Typed dates are applied on Enter or when leaving a field; an end before the start is swapped.

Presets: elements in the presets slot with data-range (ISO 8601 duration ending today, e.g. P7D = the last 7 days incl. today) or data-start/data-end set the range on click.

Examples

Date range

Two dates with a calendar popover. start and end are ISO dates; value and the form value are the interval start/end. An end before the start is swapped.

kernChange → …

<div style="display:grid;gap:16px;max-width:360px"> <kern-date-range-picker name="period" label="Report period" start="2026-10-01" end="2026-10-14" locale="en-GB" clearable></kern-date-range-picker> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div>

root.querySelector('kern-date-range-picker').addEventListener('kernChange', (e) => { root.querySelector('output').textContent = 'kernChange → ' + JSON.stringify(e.detail); });

Presets and limits

Elements in the presets slot set the range on click: data-range is an ISO 8601 duration ending today (P7D = the last 7 days incl. today), or use data-start/data-end. max-days limits the length; max is set to today here so no future days can be picked.

Today

Last 7 days

Last 30 days

Q1 2026

<div style="max-width:360px"> <kern-date-range-picker label="Energy statistics" max-days="90" hint="At most 90 days" locale="en-GB" label-incomplete="Enter a start and an end"> <kern-button slot="presets" variant="ghost" size="sm" data-range="P1D">Today</kern-button> <kern-button slot="presets" variant="ghost" size="sm" data-range="P7D">Last 7 days</kern-button> <kern-button slot="presets" variant="ghost" size="sm" data-range="P30D">Last 30 days</kern-button> <kern-button slot="presets" variant="ghost" size="sm" data-start="2026-01-01" data-end="2026-03-31">Q1 2026</kern-button> </kern-date-range-picker> </div>

const d = new Date(); root.querySelector('kern-date-range-picker').max = new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 10);

Properties

ariaLabelTextattribute aria-label-text

string | undefined

Accessible name when there is no visible label.

clearabledefault false

boolean

Show a button that empties both dates.

disabled

reflects

default false

boolean

end

mutable

default ''

string

Last day (inclusive), ISO YYYY-MM-DD.

error

string | undefined

firstDayOfWeekattribute first-day-of-week

number | undefined

0 = Sunday … 6 = Saturday; defaults to the locale.

hint

string | undefined

isDateDisabled

((iso: string) => boolean) | undefined

Additional rule for unselectable days.

label

string | undefined

labelClearattribute label-clear · default Clear · de Leeren

string | undefined

labelEndattribute label-end · default To · de Bis

string | undefined

labelIncompleteattribute label-incomplete · default Enter start and end · de Start und Ende angeben

string | undefined

Shown when only one date is set.

labelInvalidattribute label-invalid · default Not a valid date · de Kein gültiges Datum

string | undefined

labelOpenattribute label-open · default Open calendar · de Kalender öffnen

string | undefined

labelOutOfRangeattribute label-out-of-range · default Date not allowed · de Datum nicht erlaubt

string | undefined

labelStartattribute label-start · default From · de Von

string | undefined

labelTooLongattribute label-too-long · default At most {n} days · de Höchstens {n} Tage

string | undefined

Shown when the range is longer than maxDays; {n} is replaced by it.

locale

string | undefined

BCP 47 locale; defaults to <html lang>, then the browser language.

max

string | undefined

Latest allowed date.

maxDaysattribute max-days

number | undefined

Longest allowed range in days (inclusive).

min

string | undefined

Earliest allowed date.

name

string | undefined

noImplicitSubmitattribute no-implicit-submit · default false

boolean

Enter does not submit the surrounding form.

readonlydefault false

boolean

requireddefault false

boolean

showWeekNumbersattribute show-week-numbers · default false

boolean

ISO week numbers in the calendar.

size

reflects

default 'md'

"md" | "sm"

start

mutable

default ''

string

First day, ISO YYYY-MM-DD.

value

mutable

default ''

string

ISO 8601 interval start/end, empty until both are set; kept in sync with start/end.

Events

kernChange

CustomEvent<{ start: string; end: string; value: string; }>

When the range is complete or cleared.

Methods

hide()

hide() => Promise<void>

Closes the calendar.

setFocus()

setFocus() => Promise<void>

show()

show() => Promise<void>

Opens the calendar.

Slots

footer

Actions below the calendar

presets

Quick choices beside the calendar, e.g. <kern-button variant="ghost" size="sm" data-range="P7D">

CSS parts

calendar

The popover panel

control

The field box