基本使用
- 通过
show绑定一个布尔值变量，用于控制组件的弹出与收起。 - 通过
mode配置选择何种日期格式。
<template> <view> <u-datetime-picker :show="show" v-model="value1" mode="datetime" ></u-datetime-picker> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false, value1: Number(new Date()), } } } </script>
#年 月 日
此模式通过mode设置为date。
<template> <view> <u-datetime-picker :show="show" v-model="value1" mode="date" ></u-datetime-picker> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false, value1: Number(new Date()), } } } </script>
#格式化
如有需要，可以通过formatter参数编写自定义格式化规则。
注意：
微信小程序不支持通过props传递函数参数，所以组件内部暴露了一个setFormatter方法用于设置格式化方法，注意在页面的onReady生命周期获取ref再操作。
<template> <view> <u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="datetime" :formatter="formatter" ></u-datetime-picker> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false, value1: Number(new Date()), } }, onReady() { // 微信小程序需要用此写法 this.$refs.datetimePicker.setFormatter(this.formatter) }, methods: { formatter(type, value) { if (type === 'year') { return `${value}年` } if (type === 'month') { return `${value}月` } if (type === 'day') { return `${value}日` } return value }, }, } </script>
#限制最大最小值
参数minDate和maxDate可以设置最大值和最小值（传入时间戳）。
<template> <view> <u-datetime-picker :show="show" v-model="value1" :minDate="1587524800000" :maxDate="1786778555000" mode="datetime" ></u-datetime-picker> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false, value1: Number(new Date()), } } } </script>
API
#Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| show | 用于控制选择器的弹出与收起 | Boolean | false | true |
| showToolbar | 是否显示顶部的操作栏 | Boolean | true | false |
| v-model | 绑定值 | String | Number | - | - |
| title | 顶部标题 | String | - | - |
| mode | 展示格式 | String | datetime | date为日期选择，time为时间选择，year-month为年月选择 |
| maxDate | 可选的最大时间（时间戳毫秒） | Number | 最大默认值为后10年 | - |
| minDate | 可选的最小时间（时间戳毫秒） | Number | 最小默认值为前10年 | - |
| minHour | 可选的最小小时，仅mode=time有效 | Number | 0 | - |
| maxHour | 可选的最大小时，仅mode=time有效 | Number | 23 | - |
| minMinute | 可选的最小分钟，仅mode=time有效 | Number | 0 | - |
| maxMinute | 可选的最大分钟，仅mode=time有效 | Number | 59 | - |
| filter | 选项过滤函数 | Function | null | - |
| formatter | 输入过滤或格式化函数(如需兼容微信小程序，则只能通过setFormatter方法) |
Function | null | - |
| loading | 是否显示加载中状态 | Boolean | false | true |
| itemHeight | 各列中，单个选项的高度 | String | Number | 44 | - |
| cancelText | 取消按钮的文字 | String | 取消 | - |
| confirmText | 确认按钮的文字 | String | 确认 | - |
| cancelColor | 取消按钮的颜色 | String | #909193 | - |
| confirmColor | 确认按钮的颜色 | String | #3c9cff | - |
| visibleItemCount | 每列中可见选项的数量 | String | Number | 5 | - |
| closeOnClickOverlay | 是否允许点击遮罩关闭选择器（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） | Boolean | false | true |
| defaultIndex | 各列的默认索引 | Array | [] | - |
#Events
| 事件名 | 说明 | 回调参数 | 版本 |
| close | 关闭选择器时触发 | - | - |
| confirm | 点击确定按钮时触发 | value:返回所选时间戳，mode:当前模式 | - |
| change | 当选择值变化时触发 | value:返回所选时间戳，mode:当前模式 | - |
| cancel | 点击取消按钮 | - | - |
#Methods
| 方法名 | 说明 |
| setFormatter | 为兼容微信小程序而暴露的内部方法，见上方说明 |
