DateSelector Component Demo - @liwe3/webcomponents

Single Date Selection

Click on any date to select it. The selected date will be highlighted and displayed below.

Date Picker

Selected Date: None

Date Range Selection

Enable range mode to select a start and end date. Click once to select the start date, then click again to select the end date.

Range Picker

Selected Range: None

Programmatic Control

The DateSelector component provides public methods for programmatic control.

API Methods

Current Selection: None

Event Handling

The component fires dateSelected and rangeSelected custom events when dates are chosen.

Event Listener Demo

Last Event: None

Range Event Listener Demo

Last Event: None

Usage Example

// Import the DateSelector component
import { DateSelectorElement } from '@liwe3/webcomponents';

// Use in HTML
<liwe3-date-selector id="myDatePicker"></liwe3-date-selector>

// For range selection
<liwe3-date-selector range-mode></liwe3-date-selector>

// Listen to events
const picker = document.getElementById('myDatePicker');

picker.addEventListener('dateSelected', (e) => {
  console.log('Selected date:', e.detail.date);
});

picker.addEventListener('rangeSelected', (e) => {
  console.log('Selected range:', e.detail.start, 'to', e.detail.end);
});

// Programmatic API
picker.setDate('2025-01-15');
const date = picker.getSelectedDate();
picker.clear();

// Range mode API
picker.setRange('2025-01-01', '2025-01-31');
const range = picker.getSelectedRange();