Book an appointment

<div class="demo">
  <div class="demo-field">
    <label class="demo-label" for="at">Tuesday, 15 September</label>
    <input id="at" name="at" placeholder="Pick a time, or type one">
    <span class="demo-hint">Try typing <b>5</b>, <b>2pm</b>, <b>1130</b> or <b>noon</b>.</span>
  </div>
  <div class="demo-row">
    <button class="demo-btn demo-btn--ghost" id="busy">It got busier</button>
    <button class="demo-btn demo-btn--ghost" id="reset">Reset</button>
  </div>
  <p class="demo-out" id="out">Nothing booked yet.</p>
</div>

import { createTimePicker } from 'https://www.devix.pk/cdn/oss/time-picker@1.1.0/index.js';

const out = document.getElementById('out');

// What a booking API hands back: some taken, some with a price, some nearly gone.
const morning = [
  { time: '09:00', note: '3 left' },
  { time: '09:30', disabled: true, reason: 'fully booked' },
  { time: '10:00', note: '1 left' },
  { time: '10:30', note: 'AED 250' },
  { time: '11:00', disabled: true, reason: 'fully booked' },
  { time: '11:30', note: 'AED 250' },
  { time: '14:00', note: '4 left' },
  { time: '14:30', note: 'AED 320' },
  { time: '15:00', disabled: true, reason: 'fully booked' },
  { time: '16:00', note: 'last of the day' },
];

const picker = createTimePicker(document.getElementById('at'), {
  locale: 'en-GB',
  slots: morning,
  onChange: (value) => {
    const free = picker.getSlots().filter((slot) => !slot.disabled).length;
    out.textContent = value ? `Booked for ${value}. ${free - 1} slots left today.` : 'Nothing booked yet.';
    out.dataset.state = value ? 'ok' : '';
  },
});

document.getElementById('busy').addEventListener('click', () => {
  // Slots go as other people book them; the picker re-reads the list.
  picker.setOptions({ slots: morning.map((slot) => (slot.note === 'AED 250' ? { ...slot, disabled: true, reason: 'just gone' } : slot)) });
  out.textContent = 'Two more slots have gone since you opened the page.';
  out.dataset.state = '';
});

document.getElementById('reset').addEventListener('click', () => {
  picker.setOptions({ slots: morning });
  picker.setValue(null);
});

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

#at { 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; }
#at:focus { border-color: var(--demo-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--demo-accent) 22%, transparent); }
#out[data-state='ok'] { font-weight: 600; }
.dxtp { display: block; }
.dxtp { --dxtp-panel-width: 210px; }