DatePicker 日期选择器
日历选择器是允许用户在应用中选择一个日期或日期范围的组件；
通常是在界面中提供一个文本框或按钮入口，触发后弹出临时面板，用户仅通过单击面板中的日期来输入日期，选择完毕后，日期将以特定格式呈现于文本框或按钮中。
单日历
后置插槽
通过
date-append后置插槽可实现在日期后显示价格、节日等辅助信息
价格
Sep 2023
SuMoTuWeThFrSa
1 15.346 2 15.346
3 15.346 4 15.346 5 15.346 6 15.346 7 15.346 8 15.346 9 15.346
10 15.346 11 15.346 12 15.346 13 15.346 14 15.346 15 15.346 16 15.346
17 15.346 18 15.346 19 15.346 20 15.346 21 15.346 22 15.346 23 15.346
24 15.346 25 15.346 26 15.346 27 15.346 28 15.346 29 15.346 30 15.346
节日
Sep 2023
SuMoTuWeThFrSa
12
3456789
10教师节111213141516
17181920212223
24252627282930
底部提示
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
单日历区间选择
默认区间选择至少间隔一天（86400s），可以通过 min-range-gap 设置最小间隔
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
切换视图
通过开启视图切换可实现较大跨度年月份选择
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
区间选择
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
双日历
一般用于 PC 端
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
Oct 2023
SuMoTuWeThFrSa
1234567
891011121314
15161718192021
22232425262728
293031
双日历区间选择
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
Oct 2023
SuMoTuWeThFrSa
1234567
891011121314
15161718192021
22232425262728
293031
日期禁用
单面板
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
双面板
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
Oct 2023
SuMoTuWeThFrSa
1234567
891011121314
15161718192021
22232425262728
293031
售罄
单面板
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
双面板
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
Oct 2023
SuMoTuWeThFrSa
1234567
891011121314
15161718192021
22232425262728
293031
最小、最大可选时间
单面板
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
Oct 2023
SuMoTuWeThFrSa
1234567
891011121314
15161718192021
22232425262728
293031
每周第一天
通过
first-day-of-week可以调整每周第一天是星期几，从 0 开始是周日，以此类推
单面板
Sep 2023
MoTuWeThFrSaSu
123
45678910
11121314151617
18192021222324
252627282930
Sep 2023
MoTuWeThFrSaSu
123
45678910
11121314151617
18192021222324
252627282930
Oct 2023
MoTuWeThFrSaSu
1
2345678
9101112131415
16171819202122
23242526272829
3031
设置默认视图日期
当无日期绑定时，默认以当天作为当前视图日期，也可以通过
default-view-date自行设置
优先级：绑定日期 >
default-view-date> 当天new Date()
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
自适应
SuMoTuWeThFrSa
Sep 2023
12
3456789
10111213141516
17181920212223
24252627282930
Oct 2023
1234567
891011121314
15161718192021
22232425262728
293031
Nov 2023
1234
567891011
12131415161718
19202122232425
2627282930
Dec 2023
12
3456789
10111213141516
17181920212223
24252627282930
31
Jan 2024
123456
78910111213
14151617181920
21222324252627
28293031
Feb 2024
123
45678910
11121314151617
18192021222324
2526272829
Mar 2024
12
3456789
10111213141516
17181920212223
24252627282930
31
Apr 2024
123456
78910111213
14151617181920
21222324252627
282930
May 2024
1234
567891011
12131415161718
19202122232425
262728293031
Jun 2024
1
2345678
9101112131415
16171819202122
23242526272829
30
Jul 2024
123456
78910111213
14151617181920
21222324252627
28293031
Aug 2024
123
45678910
11121314151617
18192021222324
25262728293031
Sep 2024
1234567
891011121314
15161718192021
22232425262728
2930
阴影
通过 shadow 开启阴影样式
Sep 2023
SuMoTuWeThFrSa
12
3456789
10111213141516
17181920212223
24252627282930
DatePicker Props
| 参数 | 介绍 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 日期选择器类型 | String | date, date-range | date |
| date | 选择日期，支持 .sync 修饰符 | Date | — | — |
| default-view-date | 默认视图日期 | Date | — | new Date() |
| first-day-of-week | 哪一天作为一个星期的开始 | Number | 0-6 | 0（周日） |
| min-date | 最小可选择日期 | Date | — | default-view-date |
| max-date | 最大可选择日期 | Date | — | — |
| should-disable-date | 判断日期是否不可用的函数 | Function | — | — |
| is-sold-out | 判断日期是否售罄的函数 | Function | — | — |
| hightlight-today | 是否高亮今天 | Boolean | — | false |
| double-panel | 显示双日历面板 | Boolean | — | false |
| tip | 底部提示语 | String | — | — |
| min-range-gap | 最小区间选择间隔(s) | Number | — | 86400(一天) |
| vertical-scroll | 垂直滚动模式（一般用于移动端） | Boolean | — | false |
| width | 日期选择器宽度，可设置为 auto 自适应 | Number, String | — | 340 |
| view-switchable | 是否可切换视图 | Boolean | — | false |
| shadow | 开启阴影样式 | Boolean | — | false |
| is-selectable | 用于判断日期是否可选中 | Function(date, selectedDate): boolean | — | — |
DatePicker Events
| 名称 | 介绍 | 回调参数 |
|---|---|---|
| change | 当选择日期改变时触发事件 | (date) |
| select | 选择日期时触发 | (date) |
DatePicker Scoped Slots
| 名称 | 介绍 | 参数 |
|---|---|---|
| day | 每个日期显示内容 | { date, selected, disabled } |
| date-append | 每个日期后置插槽 | { date, selected, disabled } |
| tip | 日期选择器底部提示 | — |
DatePicker API
| 方法 | 介绍 | 参数说明 |
|---|---|---|
| setViewDate(date: Date) | 设置当前视图日期 | — |
| scrollToCurrentMonth() | 垂直模式下，滚动到当前已选日期所在月份 | — |