日期范围与筛选栏

日期范围 DateRangePicker

选择开始与结束日期，常用于列表筛选（交易记录、申请记录、报表）。

examples/daterange/basic.html

试一试

点击左侧快捷选项（近 7 天、本月……）一步选好
或在日历上先点开始日期、再点结束日期，移动鼠标时会预览范围；先点的日期晚于后点的日期时自动交换
设置了 data-max-range="90"：选了开始日期后，超过 90 天的日期不可选

结构

html

<div class="relative" data-cb-daterange data-max="today" data-max-range="90">
  <div data-cb-daterange-field class="flex h-11 w-full items-center gap-2 rounded-lg border … has-[[aria-expanded=true]]:border-brand">
    <svg>calendar</svg>
    <input type="text" data-cb-daterange-start name="from" placeholder="开始日期" aria-label="交易日期：开始" />
    <span aria-hidden="true">至</span>
    <input type="text" data-cb-daterange-end name="to" placeholder="结束日期" aria-label="交易日期：结束" />
    <button type="button" data-cb-daterange-clear hidden aria-label="清除日期">×</button>
  </div>
  <div data-cb-daterange-panel hidden class="absolute top-full left-0 z-40 mt-1 rounded-lg border … p-3 shadow-lg"></div>
</div>

属性	说明
`data-min` / `data-max`	可选范围，`YYYY-MM-DD` 或 `today`
`data-max-range`	最多可选天数（含开始与结束当天），例如 `90`
`data-presets`	快捷选项，逗号分隔：`today,yesterday,last7,last30,thisMonth,lastMonth`（默认全部）；设为 `""` 不显示
`data-locale` / `data-week-start`	同日期选择

宽屏（≥ 768px）显示两个月，窄屏显示一个月；快捷选项在窄屏变为顶部横向滚动
两个输入框都可以直接输入，规则同日期选择
取值：两个输入框的 value（YYYY-MM-DD）；事件 cb:daterange-change，detail = { start, end }
JS 设置：CbtisUI.setDateRange(el, '2026-09-01', '2026-09-15')

筛选栏

列表页顶部的查询条件：关键词 + 下拉选择 + 日期范围 + 查询 / 重置。

examples/daterange/filter-bar.html

整个筛选栏是一个 <form role="search">，查询按钮 type="submit"，重置按钮 type="reset"
所有组件的值都在原生表单控件上，new FormData(form) 即可得到全部查询参数；重置后下拉与日期范围会自动恢复
栅格：grid gap-4 sm:grid-cols-2 lg:grid-cols-4，日期范围占两列
按钮区在移动端两个按钮各占一半，桌面端靠右

使用建议

无障碍

两个输入框各自有 aria-label（「交易日期：开始」「交易日期：结束」），并带 aria-haspopup / aria-expanded
面板底部的选择状态（「请选择结束日期」「2026-09-01 至 2026-09-15 · 共 15 天」）通过 aria-live 播报
日历键盘操作同日期选择，跨月时自动翻页

日期范围与筛选栏 ​

日期范围 DateRangePicker ​

结构 ​

筛选栏 ​

使用建议 ​

无障碍 ​

日期范围与筛选栏

日期范围 DateRangePicker

结构

筛选栏

使用建议

无障碍