这叫啥 UI？
← 返回组件目录

COMPONENT 82 · Selection & Values

日期范围选择器

Date Range Picker

也叫DateRangePicker日期区间起止日期

把开始和结束日期作为一个连续区间选择。

Select start and end dates as one continuous interval.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 开始日期
  • 结束日期
  • 快捷区间

适合使用

  • 筛选报表、预订住宿或确定一个有明确边界的日期区间。

不建议使用

  • 只需要某一个日期时使用 Date Picker。

键盘与无障碍

  • 起止日期各有持久标签，使用原生 date 输入保留键盘与地区格式。
  • 结束早于开始时显示文字错误并关联 aria-describedby；快捷区间明确是否包含首尾。

参考 React Aria · DateRangePicker ↗核对于 2026-09-05

DESCRIBE IT TO AI

这样告诉编程助手

实现日期范围选择器（Date Range Picker）：把开始和结束日期作为一个连续区间选择。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="modern-demo">
      <label>开始日期<input id="start" type="date" value="2026-09-05" /></label
      ><label
        >结束日期<input
          id="end"
          type="date"
          value="2026-09-12"
          min="2026-09-05"
          aria-describedby="status"
      /></label>
      <div class="modern-actions">
        <button data-days="7">7 天</button><button data-days="30">30 天</button>
      </div>
      <p id="status" role="status"></p>
    </section>
    <script src="script.js" defer></script>
  </body>
</html>