Opening hours, in three places

<div class="demo">
  <div class="demo-grid-2">
    <div class="demo-field">
      <label class="demo-label" for="opens">Opens</label>
      <input id="opens" name="opens" value="09:00">
    </div>
    <div class="demo-field">
      <label class="demo-label" for="closes">Closes</label>
      <input id="closes" name="closes" value="17:30">
    </div>
  </div>
  <p class="demo-hint">At least an hour, at most twelve. Try picking a closing time before you open.</p>
  <dl class="demo-kv" id="zones"></dl>
  <p class="demo-out" id="out"></p>
</div>

import { createTimeRangePicker, readInZones, parseIso, formatTime } from 'https://www.devix.pk/cdn/oss/time-picker@1.1.0/index.js';

const out = document.getElementById('out');
const zones = document.getElementById('zones');
const elsewhere = ['Europe/London', 'America/New_York', 'Asia/Karachi'];

const picker = createTimeRangePicker(document.getElementById('opens'), {
  endInput: document.getElementById('closes'),
  locale: 'en-GB',
  step: 30,
  minDuration: 60,
  maxDuration: 12 * 60,
  zones: elsewhere,
  timeZone: 'Asia/Dubai',
  date: '2026-09-15',
  onChange: (range) => show(range),
});

function show({ start, end }) {
  const hours = picker.getDuration();
  out.textContent = start && end ? `Open ${start}–${end} — ${(hours / 3600).toFixed(1)} hours.` : 'Pick both ends.';

  zones.textContent = '';
  if (!start) return;

  // The same opening time, on the clock each customer is looking at.
  for (const reading of readInZones('2026-09-15', parseIso(start), 'Asia/Dubai', elsewhere)) {
    const row = document.createElement('div');
    row.innerHTML = `<dt>${reading.zone.split('/').pop().replace(/_/g, ' ')}</dt><dd>${formatTime(reading.time, { locale: 'en-GB' })}${reading.dayOffset ? ' (prev. day)' : ''}</dd>`;
    zones.append(row);
  }
}

show(picker.getValue());

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

#opens, #closes { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--demo-line-strong); border-radius: var(--demo-radius); background: var(--demo-surface); color: inherit; font: inherit; }
#opens:focus, #closes:focus { border-color: var(--demo-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--demo-accent) 22%, transparent); }
.dxtp { display: block; }
.demo-kv:empty { display: none; }