uni-datetime-picker 日期选择器
重要通知
组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载非uni_modules版本，旧版本将不再维护
该组件的优势是，支持时间戳输入和输出（起始时间、终止时间也支持时间戳），可同时选择日期和时间。
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
# 介绍
# 基本用法
<template>
<view class="page">
<text class="example-info">可以同时选择日期和时间的选择器</text>
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker
type="date"
:value="single"
start="2021-3-20"
end="2021-6-20"
@change="change"
/>
</view>
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker
returnType="timestamp"
@change="changeLog($event)"
start="2021-3-20"
end="2021-5-20"
/>
</view>
<uni-section
:title="'日期时间用法：' + datetimesingle"
type="line"
></uni-section>
<view class="example-body">
<uni-datetime-picker
type="datetime"
v-model="datetimesingle"
@change="changeLog"
/>
</view>
<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" />
</view>
<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single"
>我是一个插槽，点击我</uni-datetime-picker
>
</view>
<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" :border="false" />
</view>
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" disabled />
</view>
<uni-section
:title="'日期范围用法：' + '[' + range + ']'"
type="line"
></uni-section>
<view class="example-body">
<uni-datetime-picker
v-model="range"
type="daterange"
start="2021-3-20"
end="2021-5-20"
rangeSeparator="至"
/>
</view>
<uni-section
:title="'日期时间范围用法：' + '[' + datetimerange + ']' "
type="line"
></uni-section>
<view class="example-body">
<uni-datetime-picker
v-model="datetimerange"
type="datetimerange"
start="2021-3-20 12:00:00"
end="2021-6-20 20:00:00"
rangeSeparator="至"
/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
single: "2021-04-3",
datetimesingle: "2021-04-3",
range: ["2021-03-8", "2021-4-20"],
datetimerange: ["2021-03-20 20:10:10", "2021-05-10 10:10:10"],
};
},
watch: {
datetimesingle(newval) {
console.log("单选:", this.datetimesingle);
},
range(newval) {
console.log("范围选:", this.range);
},
datetimerange(newval) {
console.log("范围选:", this.datetimerange);
},
},
mounted() {
setTimeout(() => {
this.datetimesingle = "2021-5-1";
this.single = "2021-5-1";
}, 1000);
},
methods: {
change(e) {
this.single = e;
console.log("-change事件:", e);
},
},
};
</script>
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
# API
# DatetimePicker Props
| 属性名 | 类型 | 默认值 | 值域 | 说明 |
|---|---|---|---|---|
| type | String | datetime | date/daterange/datetime/datetimerange | 选择器类型 |
| value | String、Number、Array(范围选择)、Date | - | - | 输入框当前值 |
| start | String、Number | - | - | 最小值，可以使用日期的字符串(String)、时间戳(Number) |
| end | String、Number | - | - | 最大值，可以使用日期的字符串(String)、时间戳(Number) |
| return-type | String | string | timestamp 、string、date | 返回值格式 |
| border | Boolean | true | - | 是否有边框 |
| rangeSeparator | String | '-' | - | 选择范围时的分隔符 |
| placeholder | String | - | - | 非范围选择时的占位内容 |
| start-placeholder | String | - | - | 范围选择时开始日期的占位内容 |
| end-placeholder | String | - | - | 范围选择时结束日期的占位内容 |
| disabled | Boolean | false | - | 是否不可选择 |
| clear-icon | Boolean | true | 是否显示清除按钮 | |
| hide-second | Boolean | false | - | 是否显示秒，只显示时分 |
# DatetimePicker Events
| 事件名称 | 说明 | 返回值 |
|---|---|---|
| change | 确定日期时间时触发的事件，参数为当前选择的日期对象 | 单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
| maskClick | 点击遮罩层触发 | - |
| show | 弹窗弹出时触发 | - |
# DatetimePicker Methods
| 方法称名 | 说明 | 参数 |
|---|---|---|
| show | 打开弹出层 | - |
| close | 关闭弹出层 | - |
| clear | 清除上次选中的状态和值 | - |
# DatetimePicker Slots
| 名称 | 说明 |
|---|---|
| default | 会覆盖输入框 |
# 示例
注意
示例依赖了 uni-card uni-section uni-scss 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 组件下载页面 (opens new window) ，在页面右侧选择 使用 HBuilderX导入示例项目 ，体验完整示例演示 (opens new window)。
<template>
<view class="page container">
<uni-card is-full>
<text class="uni-h6">可以同时选择日期和时间的选择器</text>
</uni-card>
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
</view>
<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
</view>
<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
</view>
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
</view>
<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" />
</view>
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker returnType="timestamp" v-model="single" @change="changeLog($event)" />
</view>
<uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
</view>
<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
</view>
<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" :border="false" />
</view>
<uni-section :title="'隐藏清除按钮用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" :clearIcon="false" />
</view>
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" disabled />
</view>
</view>
</template>
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
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
<script>
export default {
data() {
return {
single: '',
datetimesingle: '',
range: ['2021-02-1', '2021-3-28'],
datetimerange: [],
start: Date.now() - 1000000000,
end: Date.now() + 1000000000
}
},
watch: {
datetimesingle(newval) {
console.log('单选:', this.datetimesingle);
},
range(newval) {
console.log('范围选:', this.range);
},
datetimerange(newval) {
console.log('范围选:', this.datetimerange);
}
},
mounted() {
setTimeout(() => {
this.datetimesingle = Date.now() - 2*24*3600*1000
this.single = '2021-2-12'
this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
},3000)
},
methods:{
change(e) {
this.single = e
console.log('change事件:', this.single = e);
},
changeLog(e) {
console.log('change事件:', e);
},
maskClick(e){
console.log('maskClick事件:', e);
}
}
}
</script>
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
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
<style lang="scss">
.example-body {
background-color: #fff;
padding: 10px;
}
</style>
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
编辑此页 (opens new window)
上次更新: 2025/02/03, 00:09:13