DatePicker 日期时间选择器 
概述
DatePicker 日期时间选择器，用于选择日期或时间。支持设置最小日期和最大日期，支持选择日期区间（起始日期~结束日期）。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiDatePicker from "@/components/firstui/fui-date-picker/fui-date-picker.vue"
export default {
components:{
fuiDatePicker
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
选择年月日
通过 show 属性控制选择器显示隐藏，type 属性设置选择日期时间类型，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。
<fui-date-picker :show="show" type="3" @change="change" @cancel="cancel"></fui-date-picker>
1
data() {
return {
show: false,
result: ''
}
},
methods: {
change(e) {
this.show = false
console.log(e)
this.result = JSON.stringify(e || {})
},
cancel() {
this.show = false
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
日期区间选择
通过 range 属性设置是否为区间选择，show 属性控制选择器显示隐藏，type 属性设置选择日期时间类型，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。
<fui-date-picker range :show="show" type="3" @change="change" @cancel="cancel"></fui-date-picker>
1
data() {
return {
show: false,
result: ''
}
},
methods: {
change(e) {
this.show = false
console.log(e)
this.result = JSON.stringify(e || {})
},
cancel() {
this.show = false
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
设置默认值
通过 value 属性设置选择器默认显示的值（注：区间选择时，结束日期默认值使用属性 valueEnd 设置），show 属性控制选择器显示隐藏，type 属性设置选择日期时间类型，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。
<fui-date-picker :value="value" :show="show" type="5" @change="change" @cancel="cancel"></fui-date-picker>
1
data() {
return {
show: false,
result: '',
value:'2021-11-22 11:12'
}
},
methods: {
change(e) {
this.show = false
console.log(e)
this.result = JSON.stringify(e || {})
},
cancel() {
this.show = false
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| show | Boolean | 是否显示选择器 | false | - |
| type | Number, String | 日期时间类型，可选值：1-年 2-年月 3-年月日 4-年月日 时 5-年月日 时分 6-时分 7-时分秒 8-分秒 | 1 | - |
| value | String | 默认选中的值（区间选择时为起始日期或时间默认值），日期格式字符串（当type=1时为年份值），如：2021（type=1）、2021-12-12、2021-12-12 10:00 等 | - | - |
| valueEnd V1.8.0+ | String | 结束日期默认选中的值,仅区间选择时有效，格式同 value | - | - |
| minDate | String | 最小可选日期，目前支持到日，日期格式字符串 | 2010-01-01 | - |
| maxDate | String | 最大可选日期，目前支持到日，日期格式字符串 | 2030-12-31 | - |
| hourRange | Array | 小时可选值区间，仅0~23之间的数，不支持小数 | [0,23] | - |
| minuteRange | Array | 分钟可选值区间，仅0~59之间的数，不支持小数 | [0,59] | - |
| secondRange | Array | 秒数可选值区间，仅0~59之间的数，不支持小数 | [0,59] | - |
| unit | Boolean | 是否显示单位（年，月，日，时，分，秒） | true | - |
| range | Boolean | 是否为区间选择，选择日期或时间的区间范围（起始日期~结束日期） | false | - |
| start | String | range 为 true时有效，起始按钮的默认文本 | 起始日期 | - |
| end | String | range 为 true时有效，结束按钮的默认文本 | 结束日期 | - |
| rangeBackground | String | 区间选择按钮选中时背景色，传值则默认颜色失效 | - | - |
| radius | Boolean | 是否显示圆角 | false | - |
| height | Number, String | 选择器内容体高度，单位rpx | 520 | - |
| size | Number, String | 选择器内容字体大小，单位px | 16 | - |
| color | String | 选择器内容字体颜色，传值则默认颜色失效（不建议修改） | - | - |
| title | String | 选择器标题 | - | - |
| titleSize | Number, String | 标题字体大小，单位rpx | 28 | - |
| titleColor | String | 标题字体颜色，传值则默认颜色失效（不建议修改） | - | - |
| confirmText | String | 确认按钮文本 | 确定 | - |
| confirmColor | String | 确认按钮文本颜色，传值则默认颜色失效 | - | - |
| cancelText | String | 取消按钮文本 | 取消 | - |
| cancelColor | String | 取消按钮文本颜色，传值则默认颜色失效（不建议修改） | - | - |
| btnSize | Number, String | （确定，取消）按钮字体大小，单位rpx | 32 | - |
| background | String | 选择器头部背景色，传值则默认颜色失效（不建议修改） | - | - |
| theme | String | 选择器主题，可选值：light、dark | light | Nvue端V1.9.5+支持，且Hbuilder x 3.6.7+有效 |
| maskClosable | Boolean | 点击遮罩是否可关闭，为true时点击触发 @cancel 事件 | true | - |
| maskBackground | String | 遮罩背景色 | rgba(0,0,0,.6) | - |
| zIndex | Number, String | 选择器层级z-index值 | 999 | Nvue端不支持，默认越靠后的元素层级越高 |
| isClose V1.9.5+ | Boolean | 点击确定按钮后是否立即关闭弹框，为false时需自行关闭（需要对选择值进行校验时候可使用） | true | - |
| param | Number, String | 自定义参数，通过事件回传 | 0 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 点击确认按钮时触发 | 具体数据格式见下方说明 |
| @cancel | 点击取消按钮或遮罩（maskClosable = true）时触发 | { param:自定义参数 } |
// @change 事件回调参数
// 第一种，非区间选择时 range = false
{
//年，根据type类型判断是否返回
year,
//月，根据type类型判断是否返回
month,
//日，根据type类型判断是否返回
day,
//时，根据type类型判断是否返回
hour,
//分，根据type类型判断是否返回
minute,
//秒，根据type类型判断是否返回
second,
//选择值组合
result,
//自定义传入的参数
param
}
// 第二种，区间选择时 range = true
{
//起始日期时间，内部属性参数同上
startDate:{
year,
month,
day,
hour,
minute,
second,
result,
param
},
//结束日期时间，内部属性参数同上
endDate:{
year,
month,
day,
hour,
minute,
second,
result,
param
}
}
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
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
# Methods
通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。
| 方法名 | 说明 | 传入参数 | 返回参数 |
|---|---|---|---|
| reset | 重置选择器选项 | - | - |
| open | 打开选择器（除了使用属性 show 控制显示隐藏，也可以调用此方法显示） | - | - |
| close V1.9.5+ | 关闭选择器（除了使用属性 show 控制显示隐藏，也可以调用此方法关闭） | - | - |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。