改造vant日期选择

<template>
  <div>
    <div @click="selectDate" class="dateText">{{ thisDate }}
    </div>

    <van-popup v-model="modelVisible" position="bottom" :style="{ height: ‘40%‘ }"
               @click-overlay="selectDate">
      <van-picker :show-toolbar="true" ref="van_picker" :columns="columns" @confirm="onConfirm" @cancel="selectDate"
                  @change="changeDate"/>
    </van-popup>
  </div>
</template>
<script>
import moment from ‘moment‘

export default {
  props: {
    wholeYear: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      thisDate: moment(new Date()).format(‘YYYY/MM/DD‘),
      modelVisible: false,
      columns: null,
      year: null,
      month: null,
      day: null,
      currentTime: null
    }
  },
  computed: {
    yearPickerData() {
      let minYear = moment(new Date()).format(‘YYYY‘) - 5
      let yearArr = []
      for (let i = 0; i < 10; i++) {
        yearArr.push((minYear + i).toString())
      }
      return yearArr
    },
    monthPickerData() {
      let month = Array.from({length: 12}, (v, k) => (+k + 1).toString())
      for (let i = 0; i < month.length; i++) {
        if (+month[i] < 10) {
          month[i] = ‘0‘ + month[i]
        }
      }
      if (this.wholeYear) {
        month.unshift(‘整年‘)
        return month
      } else {
        return month
      }
    },
    dayPickerData() {
      let day = Array.from({length: this.getDuration(this.month)}, (v, k) => (+k + 1).toString())
      for (let i = 0; i < day.length; i++) {
        if (+day[i] < 10) {
          day[i] = ‘0‘ + day[i]
        }
      }
      if (this.wholeYear) {
        day.unshift(‘整月‘)
        return day
      } else {
        return day
      }
    }
  },
  watch: {
    month(nv, ov) {
      // console.log(nv)
      this.init()
    }
  },
  methods: {
    init() {
      let that = this
      let year = that.yearPickerData
      let month = that.monthPickerData
      let day = that.dayPickerData
      let yearIndex, monthIndex, dayIndex
      let index = sessionStorage.getItem(‘selectArray‘) || ‘‘
      index = index.split(‘,‘)
      if (index.length !== 0) {
        yearIndex = index[0]
        monthIndex = index[1]
        dayIndex = index[2]
        that.columns = [
          {
            values: year,
            className: ‘column1‘,
            defaultIndex: +yearIndex
          },
          {
            values: month,
            className: ‘column2‘,
            defaultIndex: +monthIndex
          },
          {
            values: day,
            className: ‘column3‘,
            defaultIndex: +dayIndex
          }
        ]
        that.$nextTick(() => {
          that.$refs.van_picker.setColumnIndex([2], +dayIndex)
        })
      } else {
        yearIndex = that.yearPickerData.indexOf(moment(new Date()).format(‘YYYY‘))
        monthIndex = that.monthPickerData.indexOf(moment(new Date()).format(‘MM‘))
        dayIndex = that.dayPickerData.indexOf(moment(new Date()).format(‘DD‘))
        that.columns = [
          {
            values: year,
            className: ‘column1‘,
            defaultIndex: yearIndex
          },
          {
            values: month,
            className: ‘column2‘,
            defaultIndex: monthIndex
          },
          {
            values: day,
            className: ‘column3‘,
            defaultIndex: dayIndex
          }
        ]
        that.$nextTick(() => {
          // 获取当前的索引
          // console.log(that.$refs.van_picker.getColumnIndex([2]))
          that.$refs.van_picker.setColumnIndex([2], dayIndex)
          // this.$refs.van_picker.$children.children.defaultIndex = 20
        })
      }
    },
    // 弹出日期选择
    selectDate() {
      this.modelVisible = !this.modelVisible
    },
    // 选项改变时候的值
    changeDate(picker, value, index) {
      // console.log(`当前值：${value}, 当前索引：${index}`)
      let result = value.toString().split(‘,‘)
      // console.log(‘当前被改变的日期数组‘, result)
      this.year = result[0]
      this.month = result[1]
      this.day = result[2]

      // 取序号
      let yearIndex = this.columns[0].values.findIndex(item => {
        return item === result[0]
      })
      let monthIndex = this.columns[1].values.findIndex(item => {
        return item === result[1]
      })
      let dayIndex = this.columns[2].values.findIndex(item => {
        return item === result[2]
      })
      sessionStorage.setItem(‘selectArray‘, [yearIndex, monthIndex, dayIndex])
      this.currentTime = value.join(‘‘)
    },
    // 选取的日期
    onConfirm(values, index) {
      // console.log(‘当前选择的日期数组‘, values)
      sessionStorage.setItem(‘selectArray‘, index)
      this.selectDate()
      this.thisDate = values.join(‘/‘)
      if (this.thisDate.indexOf(‘/整年/整月‘)) {
        this.thisDate = this.thisDate.split(‘/整年/整月‘)[0]
      }
      if (this.thisDate.indexOf(‘/整月‘)) {
        this.thisDate = this.thisDate.split(‘/整月‘)[0]
      }
      this.columns[0].defaultIndex = index[0]
      this.columns[1].defaultIndex = index[1]
      this.columns[2].defaultIndex = index[2]
      // 给父组件传递选中的值
      if (values[1] !== ‘整年‘) {
        this.$emit(‘datePickerData‘, values.join(‘‘))
      } else {
        this.$emit(‘datePickerData‘, values[0])
      }
    },
    // 返回当前月份有多少天
    getDuration(date) {
      let dt = new Date(date)
      dt.setMonth(dt.getMonth() + 1)
      dt.setDate(0)
      return dt.getDate()
    }
  },
  mounted() {
    if (!moment) {
      console.log(‘找不到moment对象，请检查是否引用或者安装依赖包‘)
      return
    }
    let year = this.yearPickerData
    let yearIndex = this.yearPickerData.indexOf(this.thisDate.slice(0, 4))
    let month = this.monthPickerData
    let monthIndex = this.monthPickerData.indexOf(this.thisDate.slice(5, 7))
    let day = this.dayPickerData
    let dayIndex = this.dayPickerData.indexOf(this.thisDate.slice(8, 10))
    this.columns = [
      {
        values: year,
        className: ‘column1‘,
        defaultIndex: yearIndex
      },
      {
        values: month,
        className: ‘column2‘,
        defaultIndex: monthIndex
      },
      {
        values: day,
        className: ‘column3‘,
        defaultIndex: dayIndex
      }
    ]
  }
}
</script>
<style lang="stylus" scoped>
.dateText
  color #FF8900
  font-size 14px
</style>

 <date-picker @datePickerData="datePickerData"></date-picker>

    datePickerData(date) {
      if (date.indexOf(‘整月‘)) {
        date = date.split(‘整月‘)[0]
      }
      console.log(date)
    }