模仿企业微信实现日期期间选择

效果图如下：

实现是用vant-ui时间插件van-datetime-picker以及dayjs改写而成

代码如下：

html部分

<van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" v-model="currentDate" @confirm="onConfirm" @change="changeDate">

<div class="time-item time-right" @click="startBtn(2)" :class="active === 2 ? 'active' : ''">

js部分

import dayjs from "dayjs";

data() { return { showPop: false, minDate: new Date(2021, 0, 1), maxDate: new Date(2100, 10, 1), currentDate: new Date(this.startTime1 + '-' + this.startTime2 + '-' + this.startTime3), startTime1: '2021', startTime2: '01', startTime3: '01', endTime1: '2021', endTime2: '12', endTime3: '31', active: 1 } }

methods: {

changeDate(e){
    if(this.active == 1){
            this.startTime1 = e.getValues()[0]
            this.startTime2 = e.getValues()[1]
            this.startTime3 = e.getValues()[2]
    }else {
            this.endTime1 = e.getValues()[0]
            this.endTime2 = e.getValues()[1]
            this.endTime3 = e.getValues()[2]
    }

},

startBtn(type){
    this.active = type
    this.currentDate = dayjs(this.currentDate).format('YYYY-MM-DD')
    if(type == 1){
            this.currentDate = new Date(this.startTime1 + '-' + this.startTime2 + '-' + this.startTime3)
    }else {
            this.currentDate = new Date(this.endTime1 + '-' + this.endTime2 + '-' + this.endTime3)
    }
},

onConfirm(time) {
    this.startTime = this.startTime1 + '-' +this.startTime2 + '-' + this.startTime3;
    this.endTime = this.endTime1 + '-' + this.endTime2 + '-' + this.endTime3;
    if(this.endTime <= this.startTime){
            uni.showToast({
                    title:'结束时间不能早于开始时间',
                    duration:5000,
                    icon:'none' 
            })
            return;
    }
    this.currentDate = new Date(this.startTime1 + '-' + this.startTime2 + '-' + this.startTime3);
}

}