Date Picker

Calendar date selection. Supports single-date, range, week and month modes — plus the time mode documented on the Time Picker page; available inline or in a popover. Month/year navigation via prev/next arrow buttons plus custom month and year selects. Use when the user needs to pick a specific day (booking, scheduling, filtering). For less precise time inputs prefer a standard input with format hint.

a11y (built in): the calendar is a real <table role="grid"> labelled with the month and year on screen, with th scope="col" weekday headers and role="gridcell" cells; each day is a button whose aria-label spells the full date (appending “(today)”), carries aria-pressed for selection, and drops out of the tab order with tabindex="-1" when it is out of month, adding aria-disabled when it is out of range. The input variant's trigger is a disclosure for a dialog (aria-haspopup="dialog" + aria-expanded; the panel is role="dialog" with its own aria-label), Esc closes it, and hint or error text is bound to the trigger with aria-describedby. The month and year pickers open a role="listbox" panel — Enter, Space or ↓ opens, Esc closes and returns focus to the trigger.

Usage: Mount an empty <div class="lb-datepicker--inline"> (or .lb-datepicker-field for the input variant) carrying data-lb-datepicker — the controller renders all inner markup itself, configured by data-lb-variant, data-lb-mode, data-lb-size, data-lb-label / data-lb-hint / data-lb-error / data-lb-placeholder, data-lb-week-start and data-lb-disabled. It auto-inits on DOMContentLoaded (instance at el._lbDatePicker); options with no attribute form — minDate, maxDate, formatDate, onChange / onRangeChange callbacks — need the constructor form new LB.DatePicker(el, options). Every mode dispatches the single event lb-datepicker-change on the host element (non-bubbling — listen on the element itself) with detail.mode and detail.value, plus detail.rangeStart / rangeEnd in range mode and detail.weekStart / weekEnd in week mode. Programmatic writes: setValue(date), setRange(start, end), setTime({hours, minutes}).

Date Picker Demo

Inline — Single Date
Inline — Date Range
Input Trigger — Single Date
Input Trigger — Date Range
Size Variants (Small / Large)
With Error
Disabled

Week mode — data-lb-mode="week"

Select a whole week instead of a day. Same grid as single mode; hover highlights the row, click selects the week containing that day. Useful for date pickers in agile/sprint-style scheduling. Emits lb-datepicker-change with detail.value = week start, plus detail.weekStart and detail.weekEnd. Configure week start with data-lb-week-start="0" for Sunday-first; default is Monday (ISO).

Sunday-first shown above. For Monday-first (ISO), pass data-lb-week-start="1" — same component, just shifts which day starts the row.

Month mode — data-lb-mode="month"

Pick a month + year. Layout is a 4×3 grid of month cells; the header carries year navigation chevrons. Today's month is outlined in accent. Emits lb-datepicker-change with detail.value = first of selected month. Useful for navigation in calendars (e.g. Calendar component's month-view headline) and for monthly-cadence reports.

Inline
Input variant