美文网首页
VANT 组件 Calendar 日历 + DatetimePi

VANT 组件 Calendar 日历 + DatetimePi

作者: Pluto_7a23 | 来源:发表于2021-06-16 14:04 被阅读0次

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>

努力学习中,争取月入过万!!!!

相关文章

网友评论

      本文标题:VANT 组件 Calendar 日历 + DatetimePi

      本文链接:https://www.haomeiwen.com/subject/zptfeltx.html