Apply and cancel

<div class="demo">
  <div class="demo-field">
    <label class="demo-label" for="range">Export range</label>
    <input id="range" name="range" class="demo-input">
    <p class="demo-hint">Nothing runs until you press Apply.</p>
  </div>
  <p class="demo-out" id="log" aria-live="polite">No export yet.</p>
</div>

import { createDateRangePicker } from 'https://www.devix.pk/cdn/oss/date-range-picker@1.2.0/index.js';

let runs = 0;
createDateRangePicker(document.getElementById('range'), {
  confirm: true,
  presets: ['last7', 'last30', 'lastMonth', 'lastQuarter'],
  maxLength: 366,
  onChange: ({ start, end }) => {
    runs += 1;
    document.getElementById('log').textContent = start ? `Export #${runs} queued: ${start} → ${end}` : 'Cleared.';
  },
});

@import url('https://www.devix.pk/cdn/oss/date-range-picker@1.2.0/date-picker.min.css');