soc_app/src/components/DatePicker/index.vue

<template>
  <div class="date-picker">
    <div class="date-picker-box" >
      <vc-date-picker
        ref="Calendar"
        class="calendar"
        v-model="date"
        :first-day-of-week="1"
        :disabled-dates='disabledDates'
        @transition-start="queryMoth"
        @dayclick="onDayClick">
      </vc-date-picker>
    </div>
    <van-divider @click="foldBox">
      <van-icon v-if="showPicker"  name="arrow-up" color="#ccc" size="20"/>
      <van-icon v-else name="arrow-down" color="#ccc" size="20"/>
    </van-divider>
<!--    <p class="hide-line" @click="foldBox">-->
<!--      <span>-->
<!--        <van-icon v-if="showPicker"  name="arrow-up" color="#ccc" size="20"/>-->
<!--        <van-icon v-else name="arrow-down" color="#ccc" size="20"/>-->
<!--      </span>-->

<!--    </p>-->
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  data(){
    let date = dayjs().add(1, 'day').format('YYYY-MM-DD');
    return{
      date:new Date(),
      showPicker:true,
      num:0,
      height:null,
      disabledDates:{
        start: date
      }
    }
  },
  mounted() {

  },
  watch:{
    // 监听显示状态
    showPicker (){
      let weeksBox = document.getElementsByClassName('vc-day');
      let pickerBox = document.getElementsByClassName('date-picker-box')[0];
      if( this.showPicker){
        for(let i = 0; i < weeksBox.length;i++){
          weeksBox[i].style.transitionDuration = `.5s`;
          weeksBox[i].style.transform = `translate(0, 0)`;
        }
        pickerBox.style.height = `${this.height}px`;
        console.log('show')
      }else {
        this.height = pickerBox.offsetHeight;
        for(let i = 0; i < weeksBox.length;i++){
          weeksBox[i].style.transitionDuration = `.5s`;
          weeksBox[i].style.transform = `translate(0, -${this.num * 32}px)`;
        }
        pickerBox.style.height =  `100px`;
        console.log('hide')
      }
    }
  },
  methods:{
    foldBox(){
      let Calendar =  this.$refs.Calendar;
      console.log(Calendar,'Calendar')
      this.num = Calendar.dateParts[0].week - 1;
      this.showPicker = !this.showPicker;
    },
    // 获取年、月份
    queryMoth(){
      let Calendar = this.$refs.Calendar;
      let year = Calendar.$refs.calendar.pages[0].year;
      let month = Calendar.$refs.calendar.pages[0].month;
      this.$emit('Mouth',{year,month});
      if(!this.showPicker) this.showPicker = true;
    },
    //点击日期
    onDayClick(day){
      if(day.isDisabled) return;
      console.log(day,'day')
      // let dayLine = day.classes[7].substring(5);
      // this.num = dayLine -1;
      this.$emit('change',day.id)
    },
  }
}
</script>

<style lang="scss">
.date-picker {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  .calendar {
    border: none;
    width: 100%;
  }
  .vc-header{
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index:10;
  }
  .vc-arrow{
    position: relative;
    z-index:10;
  }
  .vc-weeks{
    overflow: hidden;
    transition-duration: .8s;
    background-color: #fff;
    padding-top: 0;
  }
  .vc-weekday{
    position: relative;
    padding-top: 10px;
    background-color: #fff;
    z-index:10;
  }
  .vc-day{
    transition-duration: .5s;
  }
  .date-picker-box{
    overflow: hidden;
    transition-duration: .5s;
  }
  .hide-line{
    box-sizing: border-box;
    display: flex;
    height: 1px;
    width: 100%;
    margin: 30px 0;
    background-color: #eaeaea;
    justify-content: center;
    align-items: center;
    >span{
      display: inline-block;
      padding: 6px;
      background-color: #fff;
    }
  }
  .van-divider{
    margin: 10px 20px;
  }
}
</style>