About ARS Date Picker
A lightweight custom element wrapping a native date input with styled
OK / Cancel buttons. Emits ars-date-picker:select and
ars-date-picker:cancel events so hosts stay declarative.
Basic Usage
Default (light theme)
Standard appearance on a light background
Dark theme
Native dark appearance via CSS variables
Programmatic Control
Last action: No interaction yet
Event Monitoring
All picker interactions are logged below.
Event Log:
Ready to capture picker events...
Theme Toggle
Usage Instructions
ES Module Import:
import ArsDatePicker from '/dist/components/ars-date-picker/ars-date-picker.js'
HTML Usage:
<ars-date-picker open label="Select date"></ars-date-picker>
Programmatic API:
const picker = document.querySelector('ars-date-picker');
picker.open(); // show
picker.close(); // hide
picker.value = '2026-05-21'; // set date
Event Handling:
picker.addEventListener('ars-date-picker:select', (e) => {
console.log('Selected:', e.detail.date);
});
picker.addEventListener('ars-date-picker:cancel', () => {
console.log('Cancelled');
});
CSS Custom Properties:
--ars-date-picker-bg
--ars-date-picker-border-color
--ars-date-picker-header-color
--ars-date-picker-input-bg
--ars-date-picker-ok-bg
--ars-date-picker-cancel-color
...