小程序使用picker-view自定义日期选择器

首先创建wxml结构

        <picker-view class="pickerView" indicator-style="height: 40px;" :value="value" @change="bindDateChangeStart" @click.stop="">
            <picker-view-column class="pickerColumn">
                <div class="pickerItem" v-for="(item,key) in years" :key='key'>{{item}}年</div>
            </picker-view-column>
            <picker-view-column class="pickerColumn">
                <div class="pickerItem" v-for="(item,key) in months" :key='key'>{{item}}月</div>
            </picker-view-column>
            <picker-view-column class="pickerColumn">
                <div class="pickerItem" v-for="(item,key) in days" :key='key'>{{item}}日</div>
            </picker-view-column>
        </picker-view>

然后我们定义数据

 data(){
        return {
            years: 0,
            months: 0,
            days: 0,
            value: [8, 1, 1],//默认滚动的索引值
            
        }
    }

然后我们初始化数据initDatas

initDatas () {
        const date = new Date()
        const nowYear = date.getFullYear()
        const nowMonth = date.getMonth() + 1
        const nowDay = date.getDate()
        this.year = nowYear
        this.month = nowMonth
        this.day = nowDay
        // 循环前先清空数组
        this.years = []
        this.months = []
        for (let i = nowYear-30; i <= nowYear; i++) {
            this.years.push(i)
        }
        // 设置月份列表
        for (let i = 1; i <= 12; i++) {
            this.months.push(i)
        }
        // 初始化当前年月
        if(this.birthday && this.birthday.indexOf('-')!=-1){            
            var birthday_obj = this.birthday.split('-'); 
            this.getMonth(parseInt(birthday_obj[0]), parseInt(birthday_obj[1]), parseInt(birthday_obj[2]))
        }else{
            this.getMonth(nowYear, nowMonth, nowDay)
        }
        
    },
getMonth (year, month, day) {
        let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
        let dayNum = 0
        // 通过年和月获取这个月份下有多少天
        if (month === 2) { // 闰年
            dayNum = ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
        } else {
            dayNum = daysInMonth[month - 1]
        }
        this.days = []
        for (let i = 1; i <= dayNum; i++) {
            this.days.push(i)
        }
        // 初始 选中年月日对应下标
        let yearIdx = 0
        let monthIdx = 0
        let dayIdx = 0
     
        // 获取滚动后 年月日对应的下标
        this.years.map((v, idx) => {
            if (v === year) {
                yearIdx = idx
            }
        })
        this.months.map((v, idx) => {
            if (v === month) {
                monthIdx = idx
            }
        })
        this.days.map((v, idx) => {
            if (v === day) {
                dayIdx = idx
            }
        })
        // 重置滚动后 年月日 的下标
        this.value = [yearIdx, monthIdx, dayIdx]
        // 赋值年月日
        this.year = this.years[yearIdx]
        this.month = this.months[monthIdx]>9?this.months[monthIdx]:'0'+this.months[monthIdx]
        this.day = this.days[dayIdx]>9?this.days[dayIdx]:'0'+this.days[dayIdx]
        },

当用户滑动的时候，触发bindDateChangeStart事件

bindDateChangeStart (e) {
            // valIndex 是获取到的年月日在各自集合中的下标
            const valIndex = e.mp.detail.value
            // console.log(JSON.stringify(e.mp.detail.value))
            let year = this.years[valIndex[0]]
            let month = this.months[valIndex[1]]
            let day = this.days[valIndex[2]]
            // 滚动时再动态 通过年和月获取 这个月下对应有多少天
            this.getMonth(year, month, day)
        },