Hotel stay

<div class="demo">
  <div class="demo-grid-2">
    <div class="demo-field"><label class="demo-label" for="in">Check in</label><input id="in" name="check_in" class="demo-input"></div>
    <div class="demo-field"><label class="demo-label" for="out">Check out</label><input id="out" name="check_out" class="demo-input"></div>
  </div>
  <p id="total" class="total" aria-live="polite">Choose your dates</p>
</div>

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

// A made-up price list: weekends cost more, a few nights are sold out.
const start = today();
const nights = {};
for (let day = start; day < start + 120; day++) {
  const weekday = new Date(day * 864e5).getUTCDay();
  nights[toIso(day)] = { price: weekday === 5 || weekday === 6 ? 540 : 420, soldOut: (day * 7) % 23 === 0 };
}

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

createDateRangePicker(document.getElementById('in'), {
  endInput: document.getElementById('out'),
  min: toIso(start),
  max: toIso(start + 119),
  minLength: 3, // counts both ends: 3 days = 2 nights
  maxLength: 15,
  presets: false,
  months: 2,
  decorate: (iso) => {
    const night = nights[iso];
    if (!night) return;
    return night.soldOut ? { badge: 'Full', disabled: true, label: 'sold out' } : { badge: String(night.price), label: `AED ${night.price} a night` };
  },
  onChange: ({ start, end }) => {
    if (!start || !end) return (total.textContent = 'Choose your dates');
    let sum = 0;
    let count = 0;
    for (let day = parseIso(start); day < parseIso(end); day++, count++) sum += nights[toIso(day)].price;
    total.textContent = `${count} nights · AED ${sum.toLocaleString('en')}`;
  },
});

@import url('https://www.devix.pk/cdn/oss/date-range-picker@1.2.0/date-picker.min.css');
.total { margin: 0; font-size: 13px; font-weight: 500; }
.demo-input { padding-inline-end: 10px; }