Analytics filter

<div class="demo">
  <div class="demo-field">
    <label class="demo-label" for="period">Report period</label>
    <input id="period" name="period" class="demo-input">
  </div>
  <dl class="demo-kv">
    <div><dt>getRange()</dt><dd id="range">—</dd></div>
    <div><dt>previous period</dt><dd id="previous">—</dd></div>
  </dl>
</div>

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

const show = (range) => {
  document.getElementById('range').textContent = range.start ? `${range.start} → ${range.end}` : '—';
  if (!range.start || !range.end) return;
  const [a, b] = comparisonRange(parseIso(range.start), parseIso(range.end), 'previousPeriod');
  document.getElementById('previous').textContent = formatDateRange(a, b, 'en-GB');
};

const picker = createDateRangePicker(document.getElementById('period'), {
  presets: ['today', 'last7', 'last30', 'thisMonth', 'lastMonth', 'thisQuarter', 'yearToDate'],
  maxLength: 90,
  months: 2,
  onChange: show,
});
show(picker.getRange());

@import url('https://www.devix.pk/cdn/oss/date-range-picker@1.2.0/date-picker.min.css');
.demo-kv dd { font-family: var(--demo-mono); font-size: 11.5px; }