Date Range Pill
Overview
A pill shows the selected range; pick start and end days on the mini calendar below. The range highlights as one band, hover previews it and the day count updates automatically.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Date Range Pill to your project in your colors.
Where to use it
Search boxes, AI chat inputs, form fields, file uploads, verification codes and anywhere else people type.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add date-range-pill
mcp › Use 8pt MCP to call get_component("date-range-pill")
Code
Source for Date Range Pill. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-dr">
<div class="x-dr__pill"><span data-a>Start date</span><i aria-hidden="true">→</i><span data-b>End date</span><em></em></div>
<div class="x-dr__cal">
<header><b>2026 December</b></header>
<div class="x-dr__wk"><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>D</span></div>
<div class="x-dr__days"></div>
</div>
</div>.x-dr{display:grid;gap:6px;width:min(270px,100%);color:var(--d-fg,#fff)}
.x-dr__pill{display:flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 14px;border-radius:999px;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.12));font:600 12.5px/1 var(--d-font,system-ui,sans-serif)}
.x-dr__pill span{color:var(--d-muted,#9b9ba8);transition:color .2s}
.x-dr__pill span.set{color:var(--d-fg,#fff)}
.x-dr__pill i{font-style:normal;color:var(--d-muted,#9b9ba8)}
.x-dr__pill em{margin-left:auto;padding:5px 8px;border-radius:999px;font:700 11px/1 var(--d-font,system-ui,sans-serif);font-style:normal;background:color-mix(in srgb,var(--d-accent,#4D74FF) 20%,transparent);color:var(--d-accent,#4D74FF);opacity:0;transform:scale(.8);transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.x-dr__pill em.on{opacity:1;transform:none}
.x-dr__cal{padding:7px 8px;border-radius:14px;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.12))}
.x-dr__cal header{padding:0 4px 4px;font:12px/1 var(--d-font,system-ui,sans-serif)}
.x-dr__wk,.x-dr__days{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.x-dr__wk span{font:600 10px/16px var(--d-font,system-ui,sans-serif);text-align:center;color:var(--d-muted,#9b9ba8)}
.x-dr__days button{position:relative;height:22px;padding:0;border:0;background:transparent;color:inherit;font:500 11.5px/22px var(--d-font,system-ui,sans-serif);font-variant-numeric:tabular-nums;cursor:pointer;isolation:isolate}
…const init = (root) => {
const days = root.querySelector('.x-dr__days'), A = root.querySelector('[data-a]'), B = root.querySelector('[data-b]'), em = root.querySelector('.x-dr__pill em');
const lead = 1; // 2026-12-01 is a Tuesday
let html = ''; for (let i = 0; i < lead; i++) html += '<span class="pad"></span>';
for (let d = 1; d <= 31; d++) html += `<button type="button" data-d="${d}">${d}</button>`;
days.innerHTML = html;
const btns = [...days.querySelectorAll('button')];
let a = 8, b = 13, hover = 0;
const draw = () => {
const hi = b || hover;
btns.forEach(x => { const d = +x.dataset.d; x.classList.toggle('a', d === a); x.classList.toggle('b', d === b);
x.classList.toggle('in', !!(a && b && d > a && d < b)); x.classList.toggle('pv', !!(a && !b && hover > a && d > a && d <= hover)); });
…Subscribe to Builder to see the full source.See pricing