跳到主要内容
Termlib

UI 组件 · 表单输入

日期选择器

Date Picker

也叫：日期选择框、日历选择器、日期范围选择、DatePicker、RangePicker

点击输入框后弹出一个小日历，让用户点选日期或日期范围，避免手动输入格式不统一。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

订单列表顶部的筛选栏加一个日期范围选择器，左右两个框分别是开始日期和结束日期，点击后弹出并排两个月的日历面板。左侧提供「今天」「最近 7 天」「最近 30 天」快捷选项，不能选今天之后的日期，格式为 YYYY-MM-DD，可以一键清空。

发给

01判断

你的内容是这样吗？

对照两列，确认日期选择器是不是你要找的。

符合这些情况，用日期选择器

  • 填写预约日期、出发日期、截止日期这类具体的某一天
  • 在筛选栏里按时间段查询订单、日志等数据
  • 需要禁止选择某些日期的场景，比如不能预约过去的时间或已约满的日子

是这些情况，换成别的

  • 需要在整月视图里查看和安排日程、事件时

    改用日历

  • 只需要选年份或季度这类很粗的时间粒度时

    改用下拉选择

  • 填写几十年前的出生日期时，只能逐月翻页的日历面板很难用

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    选生日只能一个月一个月往前翻，用户要点上百次

  2. 02

    开始日期能选在结束日期之后，两个框之间没有做联动限制

  3. 03

    用普通输入框让用户手动输入日期，格式五花八门，后端无法解析

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由显示日期的输入框、日历图标和点击后弹出的日历面板组成，面板含年月切换、日期格子和快捷选项。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1输入框右侧有一个日历小图标，框内是年-月-日格式的日期
  2. 2点开后下方弹出带星期表头、7 列日期格子的小日历
  3. 3范围选择是两个日期之间夹着「至」或箭头

04解释

详细解释

日期选择器收起时像一个输入框，右侧有日历图标；点开后弹出小日历面板，可以切换年月、点选某一天，选完自动填入并收起。常见变体有选开始和结束两个日期的 范围选择、带时分秒的日期时间选择，以及只选月份或年份的选择器。面板上还常有「今天」「最近 7 天」这类快捷选项。

它的价值是统一格式、避免选到不存在的日期，还能禁用不可选的日期，比如预约不能选过去的日子。选生日这种离今天很远的日期时，要能直接切换年份或允许手动输入。它和 日历 不同：日历是铺在页面上展示日程和事件的大组件，日期选择器是表单里填日期的小控件。

开发者信息
术语 ID
component-date-picker
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • input[type="date"]
  • input[type="datetime-local"]
  • input[type="month"]
  • input[type="week"]
  • .ant-picker
  • .el-date-editor
  • .arco-picker
  • .t-date-picker
  • .n-date-picker
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • date-picker
  • datepicker
  • date-input
  • date-range
  • daterange
  • date-range-picker
  • date-field
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • DatePicker
  • DateRangePicker
  • DateInput
  • DateField
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30