H5页面,因为组件没有直接提供可以选中日历跟日期的组件所有吧二者结合一下使用
上代码
//这个是日历
<template>
<div>
<van-cell title="选择年月日" :value="date" @click="show = true" />
<van-calendar v-model="show" :show-confirm="false" @confirm="onConfirmDate" />
//这里使用popup弹窗加载时间
<van-popup v-model="Tame" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="time"
title="选择时间"
@confirm="confirmHan"
/>
</van-popup>
</div>
</template>
<script>
export default {
data() {
return {
show:false,
Tame:false,
date:"",
currentDate: '',
}
},
methods:{
onConfirmDate(date) {
this.Tame = true;
this.date = this.$moment(date).format('YYYY-MM-DD');
//这里使用了 moment组件
//npm install moment --save 可以直接下载使用
},
confirmHan(date){
this.dateChanged =this.date +' '+ date +':00' //这里吧日期跟时间拼接起来,因为没有秒所以自己给加了00
this.Tame = false
this.show = false
},
}
}
</script>
努力学习中,争取月入过万!!!!
网友评论