更新记录
1.0.1(2021-11-04)
下载此版本
1、修复 this.minuteStep步长不等于10时,计算默认时间错误的问题
2、新增 是否禁用当前分钟 参数
1.0.0(2020-12-23)
下载此版本
支持 微信、QQ小程序,字节跳动小程序中,选择的时间小于当前时间,显示上有些问题,其他端未做测试
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
× |
× |
× |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
时间选择的弹框依赖uview的popup组件,如果不使用uview,可将弹框修改为自己的
dateFormat 时间格式化方法并不在插件中,存放至 示例项目 /src/utils/util.js 文件中
如果下载的是示例项目
示例项目使用cli构建,需要先安装,再编译
yarn install
yarn dev:mp-weixin
<template>
<view class="container">
<u-form :model="form" ref="uForm">
<u-form-item label="选择时间" label-width="150">
<u-input v-model="dateTime" type="select" @click="popupStatus = true" />
</u-form-item>
</u-form>
<date-picker
v-model="popupStatus"
title="请选择时间"
:defaultTime="dateTime"
minuteStep="10"
days="7"
minHour="6"
maxHour="22"
minMinute="0"
maxMinute="59"
@confirm="handleDatePickerConfirm"
@cancel="handleDatePickerCancel"
@close="handleDatePickerClose"
></date-picker>
</view>
</template>
<script>
import DatePicker from '@/components/date-picker'
export default {
components: {
DatePicker,
},
data() {
return {
dateTime: '',
popupStatus: false,
}
},
onLoad() {},
methods: {
handleDatePickerConfirm(val) {
console.log('confirm', val)
this.dateTime = val
},
handleDatePickerCancel() {
console.log('cancel')
},
handleDatePickerClose() {
console.log('close')
},
},
}
</script>
<style lang="scss" scoped>
.container {
padding: 30rpx;
}
</style>
参数说明
参数 |
类型 |
默认值 |
描述 |
title |
String |
- |
标题 |
default-time |
String |
- |
初始选中时间(时间字符串格式:如 2000-01-01 00:00) |
maskClose |
Boolean |
true |
是否允许点击遮罩关闭(u-popup功能) |
days |
String, Number |
1 |
可选天数 |
minHour |
Number,String |
0 |
最小可选小时 |
maxHour |
Number,String |
23 |
最大可选小时 |
minMinute |
Number,String |
0 |
最小可选分钟 |
maxMinute |
Number,String |
59 |
最大可选分钟 |
disabledCurrentMinute |
Boolean |
false |
禁用当前分钟 |
confirmText |
String |
确认 |
确认按钮的文字 |
cancelColor |
String |
#606266 |
"取消"按钮的颜色(u-popup功能) |
cancelText |
String |
取消 |
取消按钮的文字 |
confirmColor |
String |
#2979ff |
"确认"按钮的颜色(u-popup功能) |
事件说明
名称 |
返回值 |
描述 |
cancel |
- |
点击取消按钮的回调 |
confirm |
2000-01-01 00:00 |
点击确认按钮的回调 |
close |
- |
点击取消按钮的回调(u-popup功能) |