Date Range Pill
介绍
胶囊显示所选区间，下方迷你月历点选起止日，区间高亮连成一条，悬停预览，天数自动计算。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Date Range Pill 加进你的项目并换成你的配色。
适用场景
搜索框、AI 对话输入框、表单字段、文件上传和验证码等用户输入的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add date-range-pill
mcp › 使用 8pt MCP 调用 get_component("date-range-pill")
代码
Date Range Pill 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-dr">
<div class="x-dr__pill"><span data-a>开始日期</span><i aria-hidden="true">→</i><span data-b>结束日期</span><em></em></div>
<div class="x-dr__cal">
<header><b>2026 年 12 月</b></header>
<div class="x-dr__wk"><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</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)); });
…订阅 Builder 查看完整源码。查看价格