Date Picker — lunaDOM Docs

The <luna-date-picker> component provides a dependency-free date picker with single and range selection modes, custom formatting, and min/max constraints.

Paths

/lunadom/components/date-picker/date-picker.js

REQUIRED

Single Date Selection

With Default Value

Date Range Selection

With Min/Max Constraints

Custom Date Format

Top Placement

Disabled & Readonly

Custom Styling

Customization

Attributes
value - Selected date in YYYY-MM-DD format (single mode)
value-start - Range start date in YYYY-MM-DD format (range mode)
value-end - Range end date in YYYY-MM-DD format (range mode)
placeholder - Placeholder text for the trigger input
label - Label displayed above the trigger input
help-text - Help text displayed below the trigger input
min - Minimum selectable date in YYYY-MM-DD format
max - Maximum selectable date in YYYY-MM-DD format
format - Display format token string. Supports: YYYY MM DD MMM. Defaults to 'MMM DD, YYYY'
range - Enables date-range selection mode (start + end date)
disabled - Disables the trigger input
readonly - Makes the trigger input read-only (calendar still opens)
clearable - Shows a clear button when a value is set
placement - Panel placement relative to the trigger. Defaults to 'bottom'

CSS Variables
--luna-dp-bg - Calendar panel background (default: #141414)
--luna-dp-border - Panel + trigger border colour (default: #2a2a2a)
--luna-dp-radius - Panel border radius (default: 12px)
--luna-dp-input-radius - Trigger input border radius (default: 8px)
--luna-dp-input-color - Trigger input text colour (default: #eee)
--luna-dp-focus - Focus ring / active border colour (default: var(--luna-accent, #2563eb))
--luna-dp-focus-alpha - Focus ring shadow (default: rgba(37,99,235,.2))
--luna-dp-label-color - Label text colour (default: #fff)
--luna-dp-helptext-color - Help text colour (default: #666)
--luna-dp-day-color - Default day number colour (default: #ccc)
--luna-dp-day-hover - Day hover background (default: #2a2a2a)
--luna-dp-day-muted - Outside-month day colour (default: #333)
--luna-dp-selected-bg - Selected day background (default: var(--luna-accent, #2563eb))
--luna-dp-selected-color - Selected day text colour (default: #fff)
--luna-dp-range-bg - In-range day background (default: rgba(37,99,235,.15))
--luna-dp-today-color - Today indicator colour (default: var(--luna-accent, #2563eb))
--luna-dp-nav-color - Nav arrow colour (default: #666)
--luna-dp-nav-hover - Nav arrow hover colour (default: #eee)
--luna-dp-header-color - Month/year heading colour (default: #fff)
--luna-dp-weekday-color - Weekday label colour (default: #444)
--luna-dp-z - Panel z-index (default: 1000)

Events
luna-change - Emitted when the selected value changes
{ value: string }

luna-clear - Emitted when the value is cleared
{ value: string }

Example Code

<luna-date-picker label="Select Date" placeholder="Choose a date" clearable ></luna-date-picker>  <luna-date-picker label="Appointment Date" value="2026-03-15" ></luna-date-picker>  <luna-date-picker label="Select Date Range" range placeholder="Pick start and end dates" ></luna-date-picker>  <luna-date-picker label="Booking Date" min="2026-02-25" max="2026-03-31" ></luna-date-picker>  <luna-date-picker format="DD/MM/YYYY" value="2026-03-15" ></luna-date-picker>  <luna-date-picker placement="top" ></luna-date-picker>  <luna-date-picker id="my-picker"></luna-date-picker> <script> const picker = document.getElementById('my-picker'); // Single date mode picker.addEventListener('luna-change', (e) => { console.log('Selected date:', e.detail.value); }); // Range mode picker.addEventListener('luna-change', (e) => { console.log('Range:', e.detail.valueStart, '-', e.detail.valueEnd); }); // Clear event picker.addEventListener('luna-clear', () => { console.log('Date cleared'); }); </script>  <luna-date-picker style=" --luna-dp-selected-bg: #22c55e; --luna-dp-focus: #22c55e; " ></luna-date-picker>