hare-uiDatepicker 日期选择框
基本使用
日期选择器 年份选择器 月份选择器 datetime
<<
<
2023年 2月
>
>>
一
二
三
四
五
六
日
30
31
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
1
2
3
4
5
6
7
8
9
10
11
12
<<
2019 - 2030
>>
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
<<
2023
>>
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
<<
<
2023年 2月
>
>>
一
二
三
四
五
六
日
30
31
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
1
2
3
4
5
6
7
8
9
10
11
12
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
0
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
0
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
基本使用
<template>
<div class="container">
日期选择器
<h-datepicker></h-datepicker>
年份选择器
<h-datepicker mode="year"></h-datepicker>
月份选择器
<h-datepicker mode="month"></h-datepicker>
datetime
<h-datepicker mode="datetime"></h-datepicker>
</div>
</template>
<script lang="ts" setup></script>
<style scoped lang="scss">
.container {
height: 300px;
width: 30%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
组件 API
Attributes 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 设置datepicker的大小 | string | 'sm'|'md'|'lg' | 'md' |
| mode | 设置datepicker类型 | string | 'date'| 'year' | 'month' | 'week' | 'datetime' | 'date' |
| format | 设置类型格式 | string | 与dayjs的format可选类型相同 |
Methods 方法
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
Events 事件
| 事件名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
Slots 插槽
| 插槽名 | 说明 | 参数 |
|---|---|---|