自定义picker日期时间组件

组件 —— 年-月-日 时:分

wxml部分

<picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
  <view class="picker">
    {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}
  </view>
</picker>

js部分

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    initDate: {
      type: "String"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    dateTimeArray: null,
    dateTime: null,
    selectMonth: null,
    selectYear:null
  },

  ready: function() {
    this.initDate();
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initDate: function() {
      let initDate = this.properties.initDate ? new Date(this.properties.initDate.replace(/-/g, "/")) : null;
      let newDate = initDate || new Date();
      let newYear = newDate.getFullYear();
      let newMonth = newDate.getMonth() + 1;
      let newDay = newDate.getDate();
      let newHour = newDate.getHours();
      let newMinu = newDate.getMinutes();

      let year = this.getNumArr(1970, newYear + 20);
      let month = this.getNumArr(1, 12);
      let day = this.getNumArr(1, this.maxDay(newMonth, newYear));
      let hour = this.getNumArr(0, 23);
      let minu = this.getNumArr(0, 59);
      this.setData({
        dateTimeArray: [year, month, day, hour, minu],
        dateTime: [newYear - 1970, newMonth - 1, newDay - 1, newHour, newMinu]
      })
    },

    // 月最大天数
    maxDay: function(month, year) {
      month = this.addZero(month);
      year = parseInt(year);
      let flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
      let max = null;

      switch (month) {
        case '01':
        case '03':
        case '05':
        case '07':
        case '08':
        case '10':
        case '12':
          max = 31;
          break;
        case '04':
        case '06':
        case '09':
        case '11':
          max = 30;
          break;
        case '02':
          max = flag ? 29 : 28;
          break;
        default:
          max = '月份格式不正确，请重新输入！'
      }
      return max;
    },

    // 小于10补0
    addZero: function(num) {
      num = parseInt(num);
      return num < 10 ? '0' + num : '' + num;
    },

    // 生成数字列表
    getNumArr: function(start, end) {
      start = start || 0;
      end = end || 1;
      let arr = [];
      for (var i = start; i <= end; i++) {
        arr.push(this.addZero(i))
      }
      return arr
    },

    // 改变值
    changeDateTime: function(e) {
      this.setData({
        dateTime: e.detail.value
      })
      let dateTimeArray = this.data.dateTimeArray;
      let dateTime = e.detail.value;
      let str = dateTimeArray[0][dateTime[0]] + '-' + dateTimeArray[1][dateTime[1]] + '-' + dateTimeArray[2][dateTime[2]] + " " + dateTimeArray[3][dateTime[3]] + ':' + dateTimeArray[4][dateTime[4]];
      this.triggerEvent('getDateTimeValue', {
        dateTime: str
      })
    },

    // 改变范围值
    changeDateTimeColumn: function(e) {
      switch (e.detail.column) {
        case 0:
          var dateTimeArray = this.data.dateTimeArray;
          var year = dateTimeArray[0][e.detail.value];
          var month = this.data.selectMonth;
          if (month == '02') {
            dateTimeArray[2] = this.getNumArr(1, this.maxDay(month, year));
          }
          this.setData({
            dateTimeArray,
            selectYear: year
          })
          break
        case 1:
          var dateTimeArray = this.data.dateTimeArray;
          var year = this.data.selectYear;
          var month = dateTimeArray[1][e.detail.value];
          dateTimeArray[2] = this.getNumArr(1, this.maxDay(month, year));
          this.setData({
            dateTimeArray,
            selectMonth: month
          })
          break
      }
    }
  }
})

使用

json部分

{
  "usingComponents": {
    "picker-dateTime": "文件路径"
  }
}

wxml部分

<picker-dateTime initDate="{{startDate}}" bind:getDateTimeValue="getDate"></picker-dateTime>

// initDate:接受一个日期参数，可以为空，值为空时默认当前日期
// getDate:获取组件返回的用户选择的日期

js部分

getDate: function(e) {
  console.log(e.detail.dateTime)
}