Days Between Dates Calculator — With Business Days Option

<div class="wrap">
  <h2>Days Between Dates</h2>

  <div class="date-row">
    <div class="field">
      <label>Start date</label>
      <input type="date" id="start-date" />
    </div>
    <div class="field">
      <label>End date</label>
      <input type="date" id="end-date" />
    </div>
  </div>

  <label class="toggle">
    <input type="checkbox" id="business-toggle" />
    Count business days only (excludes Sat/Sun)
  </label>

  <div class="result-card">
    <div class="big-number" id="big-number">0</div>
    <div class="big-label" id="big-label">total days</div>
  </div>

  <div class="breakdown-grid" id="breakdown-grid"></div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 20px; }

.wrap { width: 100%; max-width: 440px; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 24px; }
h2 { font-size: 17px; font-weight: 800; color: #1e293b; margin-bottom: 18px; }

.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.field input { width: 100%; padding: 10px 10px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-family: inherit; font-size: 13.5px; color: #1e293b; }
.field input:focus { outline: none; border-color: #6366f1; }

.toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #475569; font-weight: 600; margin-bottom: 18px; cursor: pointer; }
.toggle input { accent-color: #6366f1; width: 15px; height: 15px; }

.result-card { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-radius: 14px; padding: 22px; text-align: center; margin-bottom: 16px; }
.big-number { font-size: 40px; font-weight: 800; color: #4338ca; line-height: 1; font-variant-numeric: tabular-nums; }
.big-label { font-size: 12px; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }

.breakdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 10px; text-align: center; }
.stat .n { font-size: 16px; font-weight: 800; color: #1e293b; }
.stat .l { font-size: 9.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.error-text { font-size: 12.5px; color: #dc2626; font-weight: 600; text-align: center; margin-bottom: 12px; }

const startInput = document.getElementById('start-date');
const endInput = document.getElementById('end-date');
const businessToggle = document.getElementById('business-toggle');
const bigNumber = document.getElementById('big-number');
const bigLabel = document.getElementById('big-label');
const breakdownGrid = document.getElementById('breakdown-grid');

const MS_PER_DAY = 86400000;

function parseLocalDate(str) {
  const parts = str.split('-').map(Number);
  return new Date(parts[0], parts[1] - 1, parts[2]);
}

function countBusinessDays(start, end) {
  let count = 0;
  const cursor = new Date(start);
  while (cursor <= end) {
    const day = cursor.getDay();
    if (day !== 0 && day !== 6) count++;
    cursor.setDate(cursor.getDate() + 1);
  }
  return count;
}

function calc() {
  const startRaw = startInput.value;
  const endRaw = endInput.value;

  if (!startRaw || !endRaw) {
    bigNumber.textContent = '0';
    bigLabel.textContent = 'select both dates';
    breakdownGrid.innerHTML = '';
    return;
  }

  const start = parseLocalDate(startRaw);
  const end = parseLocalDate(endRaw);

  const earlier = start <= end ? start : end;
  const later = start <= end ? end : start;
  const reversed = start > end;

  const diffDays = Math.round((later - earlier) / MS_PER_DAY);

  if (businessToggle.checked) {
    const businessDays = countBusinessDays(earlier, later);
    bigNumber.textContent = businessDays;
    bigLabel.textContent = 'business days' + (reversed ? ' (dates reversed)' : '');
  } else {
    bigNumber.textContent = diffDays;
    bigLabel.textContent = 'total days' + (reversed ? ' (dates reversed)' : '');
  }

  const weeks = Math.floor(diffDays / 7);
  const months = (later.getFullYear() - earlier.getFullYear()) * 12 + (later.getMonth() - earlier.getMonth());
  const businessDays = countBusinessDays(earlier, later);
  const weekendDays = diffDays + 1 - businessDays;

  breakdownGrid.innerHTML =
    stat(diffDays, 'calendar days') +
    stat(weeks, 'full weeks') +
    stat(Math.max(0, months), 'approx months') +
    stat(businessDays, 'business days') +
    stat(Math.max(0, weekendDays), 'weekend days') +
    stat(Math.floor(diffDays / 365), 'approx years');
}

function stat(n, label) {
  return '<div class="stat"><div class="n">' + n + '</div><div class="l">' + label + '</div></div>';
}

startInput.addEventListener('input', calc);
endInput.addEventListener('input', calc);
businessToggle.addEventListener('change', calc);

const today = new Date();
const inThreeMonths = new Date(today.getFullYear(), today.getMonth() + 3, today.getDate());
function toIso(d) {
  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
}
startInput.value = toIso(today);
endInput.value = toIso(inThreeMonths);
calc();