Developer Reference

Initialize the picker with optional range limits and listen for selection updates.

Initialization

const pickerElement = document.getElementById('datetime-picker-1');

const picker = new DateTimePicker(pickerElement, {
  minDate: '2026-02-01T09:00:00',
  maxDate: '2026-12-31T18:00:00',
  use12Hour: true
});

pickerElement.addEventListener('datetime-change', (event) => {
  const selectedDate = event.detail; // Date or null
  console.log(selectedDate);
});

You can also pass range limits through data-min-date and data-max-date on the picker root element. Use ISO 8601 strings like 2026-02-01T09:00:00 for consistent parsing.

Event Payload

datetime-change dispatches from the picker root. event.detail is a Date when a value is applied, or null when cleared.

Cleanup

Call picker.destroy() before removing the element to detach event listeners and clear cached year markup.

Theme Variables

--accent-primary
Primary action and selected date highlight.
--bg-card
Picker panel background.
--bg-element
Input and compact element backgrounds.
--bg-hover
Hover state for dates, years, and controls.
--bg-active
Active and selected background accents.
--text-normal
Default text color.
--text-muted
Secondary labels and less prominent text.
--text-header
Header text color for strong contrast.
--border-color
Border and divider color across panel elements.
--border-radius
Corner radius across input and panel surfaces.
--shadow-popout
Elevation shadow of the floating picker panel.

Keyboard Shortcuts