Date Picker Examples

<!-- Basic single date -->
<input type="text"
       data-rsl-date-picker
       placeholder="Click to select date">

<!-- Week starting Monday -->
<input type="text"
       data-rsl-date-picker
       data-first-day="1"
       placeholder="Week starts Monday">

<!-- Basic date range -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       placeholder="Select start and end dates">

<!-- With quick presets -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       data-show-presets="true"
       data-presets="today,last7,last30,thisMonth,lastMonth"
       placeholder="Choose a preset or custom range">

<input type="text"
       data-rsl-date-picker
       data-mode="multiple"
       placeholder="Click dates to add/remove">

<!-- Today and future dates -->
<input type="text"
       data-rsl-date-picker
       data-min-date="today"
       placeholder="Today and future dates">

<!-- Future dates only (excludes today) -->
<input type="text"
       data-rsl-date-picker
       data-min-date="tomorrow"
       placeholder="Tomorrow onwards">

<!-- Disable weekends -->
<input type="text"
       data-rsl-date-picker
       data-disabled-days="0,6"
       placeholder="No weekends">

<!-- Specific date range -->
<input type="text"
       data-rsl-date-picker
       data-min-date="2025-01-01"
       data-max-date="2025-12-31"
       placeholder="2025 only">

<form id="booking-form">
    <label for="dates">Check-in / Check-out</label>
    <input type="text"
           id="dates"
           data-rsl-date-picker
           data-mode="range"
           data-min-date="today"
           data-show-presets="false"
           data-months="2"
           placeholder="Select check-in and check-out dates">

    <button type="submit">Check Availability</button>
</form>

<script>
document.getElementById('dates').addEventListener('rsl-date-change', (e) => {
    const { start, end } = e.detail.value;
    const nights = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
    console.log('Nights:', nights);
});
</script>

<!-- All accessibility features are automatic! -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       data-show-presets="true"
       placeholder="Use keyboard to navigate">

<!-- The date picker automatically handles:
- ARIA roles and attributes
- Keyboard navigation (arrows, Page Up/Down, Home/End)
- Focus trapping within the picker
- Screen reader announcements
- Focus management on open/close
-->

// Open the picker
RSL.DatePicker.open('#demo-api');

// Close the picker
RSL.DatePicker.close('#demo-api');

// Set a date range programmatically
RSL.DatePicker.setValue('#demo-api', {
    start: new Date('2025-01-01'),
    end: new Date('2025-01-31')
});

// Get the current value
const value = RSL.DatePicker.getValue('#demo-api');
console.log(value); // { start: Date, end: Date }

// Clear selection
RSL.DatePicker.clear('#demo-api');

// Listen for changes
document.getElementById('demo-api').addEventListener('rsl-date-change', (e) => {
    console.log('Selected:', e.detail.value);
    console.log('Formatted:', e.detail.formatted);
});