Pro 日期选择器面板 ​

DatePickerPro 的下拉面板本体，可单独放进弹层、抽屉等容器，无需输入框。

WARNING

Pro 版面板通过虚拟滚动展示年/月列表，年份范围由 calendar-range 控制（默认当前年前后各 10 年）。若业务需要选择超出该范围的年份（如历史数据录入、出生日期），必须通过 calendar-range 显式指定 [startYear, endYear]，否则超出范围的年份不可见也不可选。

组件选型

组件说明
DatePickerPro输入框 + 面板（表单常用）
DatePickerPanelPro（本文档）仅面板，自行控制展示与提交
DateTimePicker Pro含 datetime / datetimerange 的完整选择器

单点选择 ​

日期 date ​

左侧年/月导航 + 右侧长滚动月历，默认 type="date"。

2016
1 月
2 月
3 月
4 月
5 月
6 月
7 月
8 月
9 月
10 月
11 月
日一二三四五六
2016 年 1 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 2 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2016 年 3 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 4 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

快捷选项 shortcuts ​

左栏快捷项，点击后选中并关闭面板（与 DatePicker Pro 一致）。

2016
1 月
2 月
3 月
4 月
5 月
6 月
7 月
8 月
9 月
10 月
11 月
日一二三四五六
2016 年 1 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 2 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2016 年 3 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 4 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

按 type 浏览 ​

下表为面板支持的主要类型；在 demo 中切换 type 预览。范围类均为单面板 + 顶部 Tab（非经典双面板）。

type类别说明
date单点日期
week单点周
month / months单点月 / 多个月
year / years单点年 / 多个年
dates单点多个日期
datetime单点日期 + 时间列
daterange范围日期范围；选开始后自动切结束 Tab
monthrange范围月份范围
yearrange范围年份范围
datetimerange范围日期时间范围；须点「下一步」进结束侧，详见 DateTimePicker Pro · 范围选择
类型：
2016
1 月
2 月
3 月
4 月
5 月
6 月
7 月
8 月
9 月
10 月
11 月
日一二三四五六
2016 年 1 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 2 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2016 年 3 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 4 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

面板状态 ​

边框 border ​

默认有边框；嵌入 DatePicker Pro 弹层时通常 :border="false"。

无边框
2016
1 月
2 月
3 月
4 月
5 月
6 月
7 月
8 月
9 月
10 月
11 月
日一二三四五六
2016 年 1 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 2 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2016 年 3 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 4 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2016
1 月
2 月
3 月
4 月
5 月
6 月
7 月
8 月
9 月
10 月
11 月
日一二三四五六
2016 年 1 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 2 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2016 年 3 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 4 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

禁用 disabled ​

为 true 时整个面板不可操作。

禁用
2016
1 月
2 月
3 月
4 月
5 月
6 月
7 月
8 月
9 月
10 月
11 月
日一二三四五六
2016 年 1 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 2 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2016 年 3 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2016 年 4 月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

与 DatePickerPanel 的差异 ​

能力DatePickerPanelDatePickerPanelPro
日期/月历按月分页长滚动虚拟列表
范围选择布局默认双面板单面板 + Tab
calendar-range—支持自定义年份窗口
页脚（确定/此刻）按类型可选默认展示（show-footer 等）

本地化 ​

日期相关文案通过 国际化 配置。

API ​

属性 ​

名称说明类型默认值
model-value / v-model绑定值；范围类型为长度 2 的数组Date / array / string / number—
type选择器类型enumdate
border面板是否显示边框booleantrue
disabled是否禁用booleanfalse
editable是否可编辑booleantrue
clearable范围 datetimerange 等是否可清除booleantrue
format显示格式string—
value-format绑定值格式string—
date-format面板内日期格式string—
time-format面板内时间格式string—
default-value打开时默认日期Date / array—
default-time范围默认时刻Date / array—
disabled-date禁用日期函数Function—
cell-class-name单元格类名Function—
shortcuts快捷选项array[]
arrow-control时间箭头控制booleanfalse
show-week-number显示周数booleanfalse
show-footer显示页脚booleantrue
show-confirm显示确定booleantrue
show-now显示「此刻」booleantrue
calendar-range面板年份窗口 [startYear, endYear]，列表数据直接取自该区间；手动输入年份超出时自动钳制到最小/最大年array当前年 ±10
disabled-hours禁用小时（datetime / datetimerange）Function—
disabled-minutes禁用分钟（datetime / datetimerange）Function—
disabled-seconds禁用秒（datetime / datetimerange）Function—

面板组件不含输入框属性

prefix-icon、suffix-icon、placeholder、manual-input、persistent 等属于 DatePicker Pro（w-date-picker-pro），面板组件（w-date-picker-panel-pro）无需配置。

事件 ​

名称说明类型
update:modelValue绑定值变化Function
calendar-change日历日期更改（范围类型）Function
panel-change面板视图切换Function
visible-change可见性变化Function

插槽 ​

不支持 prev-month / next-month / prev-year / next-year 导航插槽（与 DatePicker Pro 一致）。

名称说明
default自定义单元格内容
sidebar侧边栏快捷选项区域

Copyright 2025 Winning Health 版权所有