更新记录
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不显示当前日期时间的问题
查看更多平台兼容性
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);
}
}