微信小程序picker多列选择器：日期+时间组件

微信小程序picker多列选择器：日期+时间组件

话不多说，直接上代码：

html:

<!-- 组件 -->
<view>
    <picker range="{{test}}" mode="multiSelector" bindcolumnchange='bindcolumnchange' value="{{selectvalue}}" bindchange="bindchange">
        {{date}} {{time}}
    </picker>
</view>

<!--调用组件-->
<view>
  <picker-date bind:pConfirm='pConfirm'></picker-date>
</view>

页面方法
javascript:

const app = getApp()

Page({
  data: {
    show:'none'
  },

  pConfirm(data){
    console.log('外部方法',data.detail)
  },
  
  onLoad() {
    
  },
})

组件
javascript:

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    test: [
      [],
      [],
      [],
      [],
      [],
    ],
    selectvalue: [1, 2, 3, 4, 5],
    date: '',
    time:'01-01'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    formatNumber(n){
      n = n.toString()
      return n[1] ? n : '0' + n
    },
    formatDate(date){
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return [year, month, day].map(this.formatNumber).map(this.formatNumber).join('-')
    },
    // 可以封装为获取某年某月的天数
    mGetDate(year, month) {
      let d = new Date(year, month, 0);
      return d.getDate();
    },
    //多列滚动选择器滚动时触发事件
    bindcolumnchange(e) {
      let column = e.detail.column
      let temp = this.data.selectvalue
      switch (column) {
        case 0:
          temp[0] = e.detail.value
          this.setData({
            selectvalue: temp
          }, () => {
            let day = this.mGetDate(this.data.selectvalue[0], this.data.selectvalue[1])
            let days = []
            for (let i = 1; i <= day; i++) {
              days.push(i + '日')
            }
            let temp_1 = this.data.test
            temp_1[2] = days
            this.setData({
              test: temp_1
            })
          })
          break;
        case 1:
          temp[1] = e.detail.value
          this.setData({
            selectvalue: temp
          }, () => {
            let day = this.mGetDate((this.data.selectvalue[0] + 1), (this.data.selectvalue[1] + 1))
            let days = []
            for (let i = 1; i <= day; i++) {
              days.push(i + '日')
            }
            let temp_1 = this.data.test
            temp_1[2] = days
            this.setData({
              test: temp_1
            })
          })
          break;
        case 2:
          temp[2] = e.detail.value
          this.setData({
            selectvalue: temp
          })
          break;
        case 3:
          temp[3] = e.detail.value
          this.setData({
            selectvalue: temp
          })
          break;
        case 4:
          temp[4] = e.detail.value
          this.setData({
            selectvalue: temp
          })
          break;
      }

      // console.log("第" + e.detail.column + "列", "第" + e.detail.value + "个")
    },
    // 确定选择日期
    bindchange() {
      let temp = this.data.selectvalue
      let year = (this.data.test[0][temp[0]]).substr(0, (this.data.test[0][temp[0]]).length - 1)
      year = this.addzero(year)
      let month = (this.data.test[1][temp[1]]).substr(0, (this.data.test[1][temp[1]]).length - 1)
      month = this.addzero(month)
      let day = this.data.test[2][temp[2]].substr(0, (this.data.test[2][temp[2]]).length - 1)
      day = this.addzero(day)
      let hour = this.data.test[3][temp[3]].substr(0, (this.data.test[3][temp[3]]).length - 1)
      hour = this.addzero(hour)
      let minute = this.data.test[4][temp[4]].substr(0, (this.data.test[4][temp[4]]).length - 1)
      minute = this.addzero(minute)
      this.setData({
        date: year + "-" + month + "-" + day,
        time: hour + ":" + minute,
        all: year + "-" + month + "-" + day + '' + hour + ":" + minute,
      }, _ => {
        that.triggerEvent("pConfirm", {
          date: year + "-" + month + "-" + day,
          time: hour + ":" + minute,
          all: year + "-" + month + "-" + day + '' + hour + ":" + minute,
        })
      })

    },
    //+0
  addzero(str){
    if(str.length==1){
      return "0"+str
    }else {
      return str
    }
  },
  },
  ready() {
    // 获取当前日期（年，月，日）
    let DATE = (this.formatDate(new Date())).split('-')
    let year = parseInt(DATE[0])
    let month = parseInt(DATE[1])
    let day_1 = parseInt(DATE[2])
    this.setData({
      selectvalue: [0, month - 1, day_1 - 1, 0, 0],
      date: year + "-" + month + "-" + day_1
    })
    let years = []
    let months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
    let days = []
    let hours = []
    let minutes = []
    //判断当前月份天数
    let day = this.mGetDate(year, month)
    for (let i = 1; i <= day; i++) {
      days.push(i + '日')
    }
    for (let i = 0; i < 30; i++) {
      years.push(year + i + '年')
    }
    for (let i = 1; i < 25; i++) {
      hours.push(i + "点")
    }
    for (let i = 0; i < 61; i++) {
      minutes.push(i + "分")
    }
    this.setData({
      test: [years, months, days, hours, minutes]
    })
  }
})