使用vant-Picker 编辑联动自定义时间组件(使用setColumnValue赋值)

最近要使用小程序做一个简历编辑的功能,其中有一个组件为到期时间的选择框,本来想用直接用van-datetime-picker的组件。可是他们说不行,在选项中一定要加上至今,查来查去van-datetime-picker 加不上,那能怎么办??!!只能自己写咯。

要实现的功能

1.可以选择年月
2.选项年可以选择至今,当年选择至今时,月份选项为空
3.选择近30年
4.选择当前年时,月份选项需要小于等于当前月

最后实现效果如下

使用vant-Picker 编辑联动自定义时间组件(使用setColumnValue赋值)_第1张图片

使用vant-Picker 编辑联动自定义时间组件(使用setColumnValue赋值)_第2张图片
使用vant-Picker 编辑联动自定义时间组件(使用setColumnValue赋值)_第3张图片

代码

<van-popup show="{{  endTimeShow}}" bind:close="closeEndTime" position="bottom">
  <van-picker id="timeLast" columns="{{ columns }}" show-toolbar bind:confirm="chooseEndTime" bind:cancel="closeEndTime" bind:change="onChange" />
</van-popup>
//在onload 的时候初始化 columns
      initLastData() {
        let myDate = new Date()
        let data = {
          year: myDate.getFullYear(),
          month: myDate.getMonth() + 1,
          date: myDate.getDate()
        }
        let options1 = [{text: '至今', value: '-1'}], options2 = [];
        //初始化近30年
        for (let i = data.year; i > data.year - 31; i--) {
          options1.push({
            text: i,
            value: i
          })
        }
        //当前年 ,限制月份小于等于当前月
        for (let j = 1; j <= data.month; j++) {
          options2.push({
            text: '0' + j,
            value: j
          })
        }
        // 初始化12个月
        let dataFull = []
        for (let z = 1; z <= 12; z++) {
          dataFull.push({
            text: z < 10 ? '0' + z : '' + z,
            value: z < 10 ? '0' + z : '' + z
          })
        }
        //回填 ,如果是至今,则月份选项为空,
        if (this.data.form.endTime != '至今') {
          let arr = this.data.form.endTime.split('-')
          //如果非当年前,选项为12个月
          this.setData({columns: [{values: options1},{values: arr[0] < data.year ? dataFull : options2}]})
        } else {
          this.setData({columns: [{values: options1}, {values: []}]})
        }
      },
// 当年的选项选项变化的时候
 onChange(event) {
        const {
          picker,
          value,
          index
        } = event.detail
        //此块代码可以封装,为了比较好的展示,我这边的放了全部的代码
        let myDate = new Date()
        let year = myDate.getFullYear()
        let month = myDate.getMonth() + 1
        let data = [],
          options2 = []
        for (let z = 1; z <= 12; z++) {
          data.push({
            text: z < 10 ? '0' + z : z,
            value: z
          })
        }
        for (let j = 1; j <= month; j++) {
          options2.push({
            text: '0' + j,
            value: j
          })
        }
        //如果选项变成至今,则月份选项为空
        if (value[0].value == '-1') {
          picker.setColumnValues(1, [])
          return
        }
        //如果年选项小于当前年,则显示12个月
        if (value[0].value < year) {
          picker.setColumnValues(1, data)
        } else {
          picker.setColumnValues(1, options2)
        }
      },
 showEndTime() {
        this.setData({
          endTimeShow: true
        })
        this.timeInit()
      },
// 回填组件显示时显示的值  
      timeInit() {
        let myDate = new Date()
        let data = {
          year: myDate.getFullYear(),
          month: myDate.getMonth() + 1
        }

        let dataFull = [],
          options2 = []
          // 12个月
        for (let z = 1; z <= 12; z++) {
          dataFull.push({
            text: z < 10 ? '0' + z : '' + z,
            value: z < 10 ? '0' + z : '' + z
          })
        }
        //小于当前月的选项
        for (let j = 1; j <= data.month; j++) {
          options2.push({
            text: '0' + j,
            value: j
          })
        }
        //获取组件
        let timeLast = this.selectComponent('#timeLast')
        if (this.data.form.endTime != '至今') {
          let arr = this.data.form.endTime.split('-')
          timeLast.setColumnValue(0, Number(arr[0]))
          if (arr[0] < data.year) {
       //回填月份的选项
            timeLast.setColumnValues(1, dataFull)
          } else {
            timeLast.setColumnValues(1, options2)
          }
          ///回填选中的值
          timeLast.setColumnValue(1, arr[1])
        } else {
          timeLast.setColumnIndex(0, 0)
          timeLast.setColumnValues(1, [])
        }
      },

你可能感兴趣的:(微信小程序)