日期选择器

Date Picker

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

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

详细解释

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

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

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

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

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

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