更新记录
1.1.2(2019-12-31)
1.修改当isAll=false时,跨年年份的问题
2.更多组件及回复请关注微信小程序 “YUI组件库”
1.1.1(2019-10-18)
修复滑动月份,月份天数刷新的问题
1.1.0(2019-10-14)
1.删除monthNum属性
2.新增默认日期时间value
3.修复小程序设置current不显示当前日期时间的问题
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
datetime日历
组件名:yu-datetime-picker
调用方式
<yu-datetime-picker
ref="dateTime"
startYear="2015"
value="2019-11-10 08:30:01"
:isAll="false"
:current="false"
@confirm="onConfirm">
</yu-datetime-picker>
import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
export default {
components: {
yuDatetimePicker
},
data() {
return {};
},
methods: {
onConfirm(e) {
console.log(e);
}
}
};
属性说明
属性名 |
类型 |
默认值 |
说明 |
isAll |
Boolean |
true |
过去的日期不显示模式,默认是全部显示的 |
color |
String |
#3279e4 |
确定按钮的颜色,为了匹配主题颜色 |
current |
Boolean |
true |
默认显示当前日期时间 |
value |
String |
|
新增属性,默认日期时间(isAll=true时年份不能早于startYear,isAll=false时不能早于当前天),优先级高于current,格式:2019-11-10 08:30:01 |
startYear |
[String, Number] |
当前年份 |
日期的开始年份,当isAll=false时,该参数不生效 |
endYear |
[String, Number] |
2050 |
日期的结束年份 |
关于monthNum属性:monthNum属性已删除,考虑选天模式,不会出现跨度太大的情况,默认为最近三个月(包含当前月)
事件说明
事件名 |
类型 |
说明 |
@confirm |
function |
确定选择事件 |
@cancel |
function |
取消选择事件 |
事件返回属性说明
{
"selectArr": [
"2019"
"08"
"09"
"16"
"55"
"40"
],
"selectRes": "2019-08-09 16:55:40"
}
使用方法
需使用 this.$refs.dateTime.show();触发显示
<view @tap="toggleTab()">日期</view>
<yu-datetime-picker @confirm="onConfirm" startYear="2015" ref="dateTime" value="2019-11-10 08:30:01" :isAll="false" :current="false"></yu-datetime-picker>
methods: {
toggleTab(item, index) {
this.$refs.dateTime.show();
},
onConfirm(val) {
console.log(val);
}
}