美文网首页
微信小程序之picker选择器实现时间日期的选择(已修改)

微信小程序之picker选择器实现时间日期的选择(已修改)

作者: Joker丶龙 | 来源:发表于2018-06-13 15:45 被阅读0次

    最近在做小程序时,需要实现一个时间日期的选择器,但是小程序的picker组件只支持五种选择器,分别是普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。好像没有我需要的时间日期的选择器呢,这该怎么办?

    百度了一下好像也没有找到我想要的东西,但是在评论处(不记得在什么地方看到的了)看到一个网友评论说可以通过多列选择器来实现。想想确实可以啊,我怎么就没想到呢。废话不多说,上代码:
    .wxml

      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <input value='{{time}}' placeholder='选择时间'/>
      </picker>
    

    .js

    const date = new Date();
    const years = [];
    const months = [];
    const days = [];
    const hours = [];
    const minutes = [];
    //获取年
    for (let i = 2018; i <= date.getFullYear() + 5; i++) {
      years.push("" + i);
    }
    //获取月份
    for (let i = 1; i <= 12; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      months.push("" + i);
    }
    //获取日期
    for (let i = 1; i <= 31; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      days.push("" + i);
    }
    //获取小时
    for (let i = 0; i < 24; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      hours.push("" + i);
    }
    //获取分钟
    for (let i = 0; i < 60; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      minutes.push("" + i);
    }
    Page({
      data: {
        time: '',
        multiArray: [years, months, days, hours, minutes],
        multiIndex: [0, 9, 16, 10, 17],
        choose_year: '',
      },
      onLoad: function() {
        //设置默认的年份
        this.setData({
          choose_year: this.data.multiArray[0][0]
        })
      },
      //获取时间日期
      bindMultiPickerChange: function(e) {
        // console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          multiIndex: e.detail.value
        })
        const index = this.data.multiIndex;
        const year = this.data.multiArray[0][index[0]];
        const month = this.data.multiArray[1][index[1]];
        const day = this.data.multiArray[2][index[2]];
        const hour = this.data.multiArray[3][index[3]];
        const minute = this.data.multiArray[4][index[4]];
        // console.log(`${year}-${month}-${day}-${hour}-${minute}`);
        this.setData({
          time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute
        })
        // console.log(this.data.time);
      },
      //监听picker的滚动事件
      bindMultiPickerColumnChange: function(e) {
        //获取年份
        if (e.detail.column == 0) {
          let choose_year = this.data.multiArray[e.detail.column][e.detail.value];
          console.log(choose_year);
          this.setData({
            choose_year
          })
        }
        //console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
        if (e.detail.column == 1) {
          let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
          let temp = [];
          if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
            for (let i = 1; i <= 31; i++) {
              if (i < 10) {
                i = "0" + i;
              }
              temp.push("" + i);
            }
            this.setData({
              ['multiArray[2]']: temp
            });
          } else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
            for (let i = 1; i <= 30; i++) {
              if (i < 10) {
                i = "0" + i;
              }
              temp.push("" + i);
            }
            this.setData({
              ['multiArray[2]']: temp
            });
          } else if (num == 2) { //判断2月份天数
            let year = parseInt(this.data.choose_year);
            console.log(year);
            if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
              for (let i = 1; i <= 29; i++) {
                if (i < 10) {
                  i = "0" + i;
                }
                temp.push("" + i);
              }
              this.setData({
                ['multiArray[2]']: temp
              });
            } else {
              for (let i = 1; i <= 28; i++) {
                if (i < 10) {
                  i = "0" + i;
                }
                temp.push("" + i);
              }
              this.setData({
                ['multiArray[2]']: temp
              });
            }
          }
          console.log(this.data.multiArray[2]);
        }
        var data = {
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        this.setData(data);
      },
    })
    

    相关文章

      网友评论

          本文标题:微信小程序之picker选择器实现时间日期的选择(已修改)

          本文链接:https://www.haomeiwen.com/subject/ijijeftx.html