mpvue + Vant Weapp 开发小程序之 van-datetime-picker 和 van-popup
不知道怎么配置环境的请先看第一篇的介绍:点击这里1.引入"usingComponents": {"van-popup": "/path/vant-weapp/popup/index","van-datetime-picker": "/path/vant-weapp/datetime-picker/index"}2.使用van-popup默认从中间弹出,po...
·
提示:不知道怎么配置环境的请先看第一篇的介绍:点击这里
1.引入
"usingComponents": {
"van-popup": "/path/vant-weapp/popup/index",
"van-datetime-picker": "/path/vant-weapp/datetime-picker/index"
}
2.使用
van-popup
默认从中间弹出,position
属性可以改变显示位置:可选值为top
,bottom
,right
,left
,另外show
属性表示是否显示。van-datetime-picker
一般配合van-popup
使用:
<van-popup :show="isShowDatetime" position="bottom">
<van-datetime-picker
type="date"
:value="currentDate"
@confirm="onDateConfirm"
@cancel="onDateCancel"
:min-date="minDate"
:max-date="maxDate"/>
</van-popup>
顾名思义,:min-date
和:max-date
表示可选时间的上下限,type="date"
必须要有(其他可选值:默认值datetime
-日期+时间,time
-时间,year-month
-年月),@confirm
和@cancel
表示选择日期后点击确定或者取消事件,:value="currentDate"
为时间戳,即当前展示的时间。
逻辑代码部分:
import util from '@/utils'
export default {
data () {
return {
dateVal: '',
isShowDatetime: false,
minDate: new Date((new Date().getFullYear() - 1), 10, 1).getTime(),
maxDate: new Date((new Date().getFullYear() + 2), 10, 1).getTime(),
currentDate: new Date().getTime()
}
},
methods: {
onDateConfirm (e) {
let time = util.formatDateStr(new Date(e.mp.detail))
this.dateVal = time
this.isShowDatetime = false
this.$emit('onConfirm', {value: this.dateVal, time: e.mp.detail})
},
onDateCancel () {
this.isShowDatetime = false
},
showDate () {
this.isShowDatetime = !this.isShowDatetime
}
}
}
// util.js
const that = {}
that.formatDateStr = function (date) {
// eslint-disable-next-line one-var
let MM = '', DD = ''
if (date.getMonth() > 8) { MM = (date.getMonth() + 1).toString() } else { MM = '0' + (date.getMonth() + 1).toString() }
if (date.getDate() > 9) { DD = date.getDate().toString() } else { DD = '0' + date.getDate().toString() }
return date.getFullYear() + '-' + MM + '-' + DD
}
export default that
- 注意几点:
- 这里面传入的时间不是
new Date()
而是new Date().getTime()
- 点击确定和取消都要调用
this.isShowDatetime = false
来隐藏掉日期选择器 - 月份是从 0 开始,而不是 1
最后,源码地址
更多推荐
已为社区贡献2条内容
所有评论(0)