Two months side by side

<div class="demo demo--wide">
  <div class="demo-row">
    <span class="demo-label">Months</span>
    <div class="demo-seg" role="radiogroup" aria-label="Months shown" id="months">
      <button role="radio" aria-checked="false" data-months="1">1</button>
      <button role="radio" aria-checked="true" data-months="2">2</button>
      <button role="radio" aria-checked="false" data-months="3">3</button>
    </div>
    <span class="demo-label">Presets</span>
    <div class="demo-seg" role="radiogroup" aria-label="Presets" id="presets">
      <button role="radio" aria-checked="true" data-presets="on">On</button>
      <button role="radio" aria-checked="false" data-presets="off">Off</button>
    </div>
  </div>
  <div id="inline"></div>
  <p class="demo-out" id="out"></p>
</div>

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

const t = today();
let options = { months: 2, presets: ['last7', 'last30', 'thisMonth', 'lastMonth'] };
let picker;
const out = document.getElementById('out');

const mount = () => {
  const range = picker?.getRange() ?? { start: toIso(t - 3), end: toIso(t + 10) };
  picker?.destroy();
  document.getElementById('inline').innerHTML = '';
  picker = createDateRangePicker(null, {
    inline: document.getElementById('inline'),
    ...options,
    start: range.start,
    end: range.end,
    onChange: ({ start, end }) => (out.textContent = start && end ? `${start} → ${end}` : ''),
  });
  out.textContent = `${range.start} → ${range.end}`;
};

const group = (id, attr, update) =>
  document.getElementById(id).addEventListener('click', (event) => {
    const button = event.target.closest('button');
    if (!button) return;
    document.querySelectorAll(`#${id} button`).forEach((b) => b.setAttribute('aria-checked', String(b === button)));
    update(button.dataset[attr]);
    mount();
  });
group('months', 'months', (value) => (options.months = Number(value)));
group('presets', 'presets', (value) => (options.presets = value === 'on' ? ['last7', 'last30', 'thisMonth', 'lastMonth'] : false));
mount();

@import url('https://www.devix.pk/cdn/oss/date-range-picker@1.2.0/date-picker.min.css');
body { padding-inline: 12px; }
.demo--wide { width: 100%; max-width: 900px; }
#inline { overflow-x: auto; }