ZartUI · 日期选择器

两种选择模式：单日期选择 / 周选择 / 按时间段选择

第一种 · 选择某一天

交互演示（点击触发框展开）

请选择日期

昨天

今天

明天

日

一

二

三

四

五

六

面板结构（静态展示）

区域	规格
快捷选项区	宽 `96px`，padding `8px`，每项高 `40px`，字号 `14px`，默认 `#223355`，选中文字 `#3388FF`，选中背景 `#F0F9FF`
分隔线	宽 `1px`，颜色 `#E9ECF2`，两端顶头
年月导航	左侧 `«‹`（双箭头切年 / 单箭头切月），中间年月 `14px 500`，右侧 `›»`
导航分隔线	高 `1px`，颜色 `#E9ECF2`
星期行	高 `32px`，字号 `12px`，颜色 `#A8B4C8`
日期格	`34×34px`，圆角 `4px`；选中：背景 `#3388FF`，文字 `#fff`；今天：`#3388FF 500`

第二种 · 选择周数

交互演示（点击触发框展开）

请选择周

面板结构（静态展示）

区域	规格
快捷选项区	显示含当前周的前后共 4 周（第 N 周），每项高 `40px`，选中同单日模式
分隔线	同上，两端顶头
日历区	同时显示两个月，两列之间分隔线 `#E9ECF2`
周首尾日	背景 `#3388FF`，文字 `#fff`；首日圆角左两角，尾日圆角右两角
周中间日	背景 `#F0F9FF`，文字 `#223355`，无圆角

第三种 · 按时间段选择

交互演示（点击触发框展开，可切换左侧 Tab）

请选择时间段

面板结构（静态展示 · 五种全部）

按日

按周

按月

按季

按年

Tab	右侧内容
按日	单月日历，含年月导航，选中某天
按周	双月日历，选中整周，首尾 `#3388FF`，中间 `#F0F9FF`
按月	年导航 + 1–12 月网格，4列 × 3行，选中 `#3388FF`
按季	年导航 + Q1–Q4 网格，2列 × 2行，含月份说明副文字
按年	2021–2028 年份网格，4列 × 2行，选中 `#3388FF`

第四种 · 带快捷按钮的时间段选择

交互演示（点击触发框展开，可切换左侧 Tab）

请选择时间段

面板结构（静态展示 · 五种全部）

按日

按周

按月

按季

按年

Tab	底部快捷按钮
按日	今日
按周	本周
按月	本月
按季	本季
按年	本年

返回组件首页