使用vant组件封装日历组件，并且实现组件可以使用v-model

以下是封装日历组件使用v-model

<template>
  <div class="">
       <van-calendar :min-date="minDate"
          :default-date='[objStartAndEndtime.startDate,objStartAndEndtime.endDate]'
          :max-range="31"
          :max-date='YesterDayTime'
          :allow-same-day='true'
          color="#401368" v-model="show" type="range"
          @confirm="onConfirm" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      // YesterDayTime:new Date(2023, 0, 1),
      minDate: new Date(2020, 0, 1),
      show: false,
      startDate: null,
      endDate: null,
    };
  },
   model: {
    prop:'objStartAndEndtime',//自定义接收参数，如果是input表单元素的话，一般会会默认value为接受参数
    event: 'sendTime'//这个是自定义事件
  },
   props: ['objStartAndEndtime','YesterDayTime'],
  components:{
  },
  watch:{
  },
  mounted () {
  },
  methods: {
    showMeCanlder(){
      this.show=true
    },
    onConfirm (date) {
      const [start, end] = date;
      let aStart = date[0].getTime();
      let bEnd = date[1].getTime();
      if ((bEnd - aStart) / (24 * 1000 * 3600) >= 31) {
        this.$toast('仅能查询时间跨度小于31天的数据');
        return;
      }
      console.log(date,'kkask')
      this.$emit('sendTime',{startDate:start,endDate:end})
      this.show = false
    }
  }
};
</script>

<style lang="less" scoped>
</style>

下面是使用日历组件

<template>
  <div class="container_big">
     <timeComponent v-model="objStartAndEndtime" :YesterDayTime='YesterDayTime'  @sendTime='sendTime' ref="timecalendar"></timeComponent>
  </div>
</template>

<script>
import timeComponent from './components/timeComponent.vue'
export default {
  data () {
    return {
      objStartAndEndtime:{},
      showUnsetoderPay:1,
      YesterDayTime:this.getBeforeDate(1)
    };
  },
  components:{
    timeComponent
  },
  mounted () {
    document.title='客户对账单';
    this.setBeforeMonth();
    const Dateend = new Date();
      this.clickActive(0);
    console.log(this.getWeekTime(7))
  },
  watch:{
    MinRangeDate(newval){
      if(newval){
       let start = this.dateFormatStart(this.objStartAndEndtime.startDate)
       let end = this.dateFormatStart(this.objStartAndEndtime.endDate)
       let objTime={start:start,end:end,stateIndex:this.stateIndex}
        this.$store.dispatch('change_timestartEndtime',objTime);
      }
      // this.type = store.getters.type;
    }
  },
  methods: {
    showVantcalendar(){
      this.$refs.timecalendar.showMeCanlder()
    },
    //求上周的日期
    getWeekTime(n) {
        var now = new Date();
        var year = now.getFullYear();
        //因为月份是从0开始的,所以获取这个月的月份数要加1才行
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var day = now.getDay();
        console.log(date);
        console.log(day);
        //判断是否为周日,如果不是的话,就让今天的day-1(例如星期二就是2-1)
        if (day !== 0) {
          n = n + (day - 1);
        } else {
          n = n + day;
        }
        if (day) {
          //这个判断是为了解决跨年的问题
          if (month > 1) {
            month = month;
          }
          //这个判断是为了解决跨年的问题,月份是从0开始的
          else {
            year = year - 1;
            month = 12;
          }
        }
        console.log(now.getDate()-n,'jjasjj')
        now.setDate(now.getDate() - n);
        year = now.getFullYear();
        month = now.getMonth() + 1;
        date = now.getDate();
        console.log(date)
        // console.log(n);
        var s = year + "-" + (month < 10 ? ('0' + month) : month) + "-" + (date < 10 ? ('0' + date) : date);
        return s;
    },
    priviewPage(){
      this.$router.push({
        path:'/previewBill',
        query:{}
      })
    },
    goChoice(){
      this.$router.push({
        path:'/client'
      })
    },
    sendTime(data){
      console.log(this.objStartAndEndtime)
      this.MinRangeDate = `${this.formatDateYear(this.objStartAndEndtime.startDate)}/${this.formatDate(this.objStartAndEndtime.startDate)}~${this.formatDateYear(this.objStartAndEndtime.startDate)}/${this.formatDate(this.objStartAndEndtime.endDate)}`;
      this.stateIndex=3;
    },
    // 求上周的日期
    getBeforeweekDay(){
     let starttime = this.getWeekTime(7)
     let endTime = this.getWeekTime(1)
     let start = new Date(starttime)
     let end = new Date(endTime)
      this.objStartAndEndtime={startDate:start,endDate:end}
      this.MinRangeDate = `${this.formatDateYear(start)}/${this.formatDate(start)}~${this.formatDateYear(end)}/${this.formatDate(end)}`;
    },
    // 设置6月前的日期
    setBeforeMonth () {
      const Dateend = new Date();
      let  month1 = Dateend.getMonth() - 6;
      let  abc = Dateend.setMonth(month1);
      this.minDate = new Date(abc);
    },
//求昨天的日期
    YessterDayDayorEnd(){
      const Date1 = new Date();
      this.startDate = this.getBeforeDate(1);
      this.endDate = this.getBeforeDate(1);
      this.objStartAndEndtime={startDate:this.startDate,endDate:this.endDate}
      this.MinRangeDate = `${this.formatDateYear(this.startDate)}/${this.formatDate(this.startDate)}~${this.formatDateYear(this.startDate)}/${this.formatDate(this.endDate)}`;
    },
    // 近7天的日期
    sevenDayorEnd(){
      const Date1 = new Date();
      this.startDate = this.getBeforeDate(7);
      this.endDate = this.getBeforeDate(1);
      this.objStartAndEndtime={startDate:this.startDate,endDate:this.endDate}
      this.MinRangeDate = `${this.formatDateYear(this.startDate)}/${this.formatDate(this.startDate)}~${this.formatDateYear(this.startDate)}/${this.formatDate(this.endDate)}`;
    },
     // 获取本月的第一天和T-1天
    startEndTime () {
      const nowdays = new Date();
      const year = nowdays.getFullYear();
      let month = nowdays.getMonth() + 1;
      const day = nowdays.getDate();
      month = month > 9 ? month : '0' + month;
      nowdays.setTime(nowdays.getTime() - 24 * 60 * 60 * 1000 * (day - 1));// 获取当前月份第一天
      this.startDate = nowdays;
      this.endDate = this.getBeforeDate(1);// 获取当前月份最后一天
      this.objStartAndEndtime={startDate:this.startDate,endDate:this.endDate}
      this.MinRangeDate = `${this.formatDateYear(this.startDate)}/${this.formatDate(this.startDate)}~${this.formatDateYear(this.startDate)}/${this.formatDate(this.endDate)}`;
      // this.searchPay();// 调查询接口
    },
    // 获取上个月的第一天和最后一天
    monthDayorEnd () {
      const Date1 = new Date();
      const year = Date1.getFullYear();
      const month = Date1.getMonth();
      Date1.setMonth(month - 1, 1);
      this.startDate = Date1;
      this.endDate = new Date(year, month, 0);
      this.objStartAndEndtime={startDate:this.startDate,endDate:this.endDate}
      this.MinRangeDate = `${this.formatDateYear(this.startDate)}/${this.formatDate(this.startDate)}~${this.formatDateYear(this.startDate)}/${this.formatDate(this.endDate)}`;
    },
    获取本月的第一天和最后一天
    startEndTime () {
       const nowdays = new Date();
       const year = nowdays.getFullYear();
       let month = nowdays.getMonth() + 1;
       const day = nowdays.getDate();
       month = month > 9 ? month : '0' + month;
       nowdays.setTime(nowdays.getTime() - 24 * 60 * 60 * 1000 * (day - 1));// 获取当前月份第一天
       this.startDate = nowdays;
       this.endDate = new Date(year, month, 0);// 获取当前月份最后一天
       this.MinRangeDate = `${this.formatDateYear(this.startDate)}/${this.formatDate(this.startDate)}-${this.formatDateYear(this.startDate)}/${this.formatDate(this.endDate)}`;
       this.searchPay();// 调查询接口
    },
    getBeforeDate (beforeDate = 0) {
      const time = new Date();
      time.setTime(time.getTime() - 24 * 60 * 60 * 1000 * beforeDate);
      return time;
    },
    showCalendar () {
      this.show = true;
    },
    formatDateYear (date) {
      return `${date.getFullYear()}`;
    },
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    dateFormatStart (time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      // 拼接
      return year + '-' + month + '-' + day ;
    },
    dateFormatEnd (time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      // 拼接
      return year + '-' + month + '-' + day + ' ' + 23 + ':' + 59 + ':' + 59;
    },
    // onConfirm (date) {
    //   const [start, end] = date;
    //   let aStart = date[0].getTime();
    //   let bEnd = date[1].getTime();
    //   if ((bEnd - aStart) / (24 * 1000 * 3600) >= 31) {
    //     this.$toast('仅能查询时间跨度小于31天的数据');
    //     return;
    //   }
    //   this.show = false;
    //   this.MinRangeDate = `${this.formatDateYear(start)}/${this.formatDate(start)}-${this.formatDateYear(this.startDate)}/${this.formatDate(end)}`;
    //   this.startDate = start;
    //   this.endDate = end;
    //   this.pageNo = 1;
    //   this.List = [];
    //   this.searchPay();
    //   this.stateIndex = 3;
    // }
  }
};
</script>

<style lang="less" scoped>
.container_big{
    background: #F6F6F6;
    min-height: 100vh;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
    .head_container{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        display: flex;
        justify-content: space-around;
        padding-top: 12px;
        padding-bottom: 12px;
        background: white;
        margin-top: 10px;
        .isActive{
          background: rgba(93, 79, 162, 1);
          color: #FFFFFF;
          border: 1px solid #2482FC;
        }
    }
    .benyue{
        display: flex;
        justify-content: space-between;
        padding-left: 15px;
        padding-right: 15px;
        span{
          display:inline-block;
          text-align: center;
          line-height: 23px;
          width: 54px;
          height: 23px;
          border-radius: 4px;
          border: 1px solid #999999;
          margin-left: 10px;
        }
      }
      .Contentext{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-top: 10px;
      }
      .btncontent{
        display: flex;
        justify-content: space-between;
        .oneBtn{
          background: #F6F6F6;
          color: #999999;
          height: 40px;
          border: 1px solid #999999;
          line-height: 40px;
          margin-right: 10px;
        }
        .twoBtn{
         font-size: 16px;
          height: 40px;
          font-family: PingFangSC-Regular, PingFang SC;
          line-height: 40px;
          font-weight: 400;
          background: #999999;
          color: #FFFFFF;
          border: 1px solid #999999;

        }
      }
      .export_list_text{
        margin-bottom: 10px;
        margin-top: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .copyAndshare{
        display: flex;
        padding-top: 11px;
        padding-bottom: 9px;
        background: white;
        border-top: 1px solid #f9f9f9;
        img{
          width: 14px;
          height: 14px;
        }
        div:nth-child(1){
          text-align: center;
          width: 50%;
          border-right: 1px solid #f9f9f9;
        }
        div{
          text-align: center;
          width: 50%;
        }
      }
      .export_list{
        background: white;
        padding: 10px 15px;
        .export_list_left{
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #F6F6F6;
          padding-bottom: 10px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          .span2{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5A3DA4;
          }
        }
        .export_list_content{
          display: flex;
          padding: 11px 0;
          img{
            width: 40px;
            height: 40px;
          }
          .export_list_child{
            flex: 1;
            display: flex;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            justify-content: space-between;
            .export_list_child_left{
              padding-left:15px;
              &>div{
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
              }
            }
          }
        } 
      }
}
</style>