微信小程序之日期时间控件picker

原文

在原文代码基础上做了部分修改

1. 增加默认显示当前日期时间
2. 增加有效年份范围和时间范围的开始
3. 增加结果是否显示秒

• date-time-picker.wxml文件

  <!--components/date-time-picker/date-time-picker.wxml-->
  <picker mode="multiSelector" value="{{valueArray}}" range="{{rangeValues}}" bindcolumnchange="handleColumnChange" bindchange="handleValueChange" bindcancel="handleCancel">
    <slot></slot>
  </picker>

• date-time-picker.js文件

  // components/date-time-picker/date-time-picker.js
  const leftPad0 = function (v, n = 2) {
    if (!v) {
      v = "";
    }
    let prefix = "";
    for (let i = 0; i < n; i++) {
      prefix += "0";
    }
    return (prefix + v).substr(-n);
  };
  const stringToDate = function (str) {
    str = str.replace(/-/g, "/");
    return new Date(str);
  };
  const isLeapYear = function (year) {
    if (((year % 4) == 0) && ((year % 100) != 0) || ((year % 400) == 0)) {
      return true;
    }
    return false;
  };
  const now = new Date();
  let years = [];
  const beginYear = 1990;
  for (var i = beginYear; i <= now.getFullYear(); i++) {
    years.push(i + "年");
  }
  let months = [];
  for (var i = 0; i < 12; i++) {
    months.push(leftPad0(i + 1, 2) + "月");
  }
  let days = [];
  for (var i = 0; i < 31; i++) {
    days.push(leftPad0(i + 1, 2) + "日");
  }
  let hours = [];
  for (var i = 0; i < 24; i++) {
    hours.push(leftPad0(i, 2) + "时");
  }
  let minutes = [];
  for (var i = 0; i < 60; i++) {
    minutes.push(leftPad0(i, 2) + "分");
  }
  
  Component({
    /**
     * 组件的属性列表
     */
    properties: {
      // 值，字符串格式为"YYYY-MM-DD hh:mm:ss"
      value: {
        type: String,
      },
      // 值，字符串格式为"YYYY/MM/DD hh:mm:ss"
      dateValue: {
        type: Date,
      },
      // 有效年份范围的开始，字符串格式为"YYYY", 本年传"now"
      startYear: {
        type: String,
        value: beginYear
      },
      // 有效时间范围的开始，字符串格式为"hh:mm"
      startTime: {
        type: String,
        value: "00:00"
      },
      // 结果显示秒
      showSecond: {
        type: Boolean,
        value: false
      },
      // 显示当前时间
      showNow: {
        type: Boolean,
        value: true
      },
    },
  
    /**
     * 组件的初始数据
     */
    data: {
      valueArray: [0, 0, 0, 0, 0],
      rangeValues: [
        years,
        months,
        days,
        hours,
        minutes
      ],
      pickerYear: beginYear,
      pickerMonth: 1
    },
    observers: {
      value: function (v) {
        if(!v && this.data.showNow) {
          const now = new Date();
          v = `${now.getFullYear()}-${leftPad0(now.getMonth()+1)}-${leftPad0(now.getDate())} ${leftPad0(now.getHours())}:${leftPad0(now.getMinutes())}`;
        }
        this.setData({
          valueArray: this._dateToValueArray(stringToDate(v))
        })
      },
      dateValue: function (date) {
        this.setData({
          valueArray: this._dateToValueArray(date)
        })
      },
      valueArray: function (v) {
        this._settMonthDays(v[0] + beginYear, v[1] + 1);
      }
    },
    ready() {
      this.init();
    },
    /**
     * 组件的方法列表
     */
    methods: {
      init() {
        let nowYear = new Date().getFullYear();
        const startYears = (this.data.startYear === "now" ? nowYear : this.data.startYear) + "年";
        const startTimeArr = this.data.startTime.split(':');
        const startHours = startTimeArr[0] + "时";
        const startMinutes = startTimeArr[1] + "分";
        years = years.slice(years.indexOf(startYears));
        hours = hours.slice(hours.indexOf(startHours));
        minutes = minutes.slice(minutes.indexOf(startMinutes));
        const rangeValues = [
          years,
          months,
          days,
          hours,
          minutes
        ];
        this.setData({
          rangeValues
        });
      },
      _dateToValueArray(date) {
        return [date.getFullYear() - beginYear, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()];
      },
      _settMonthDays(year, month) {
        let monthDays = 31;
        switch (month) {
          case 2:
            monthDays = 28;
            if (isLeapYear(year)) {
              monthDays = 29;
            }
            break;
          case 4:
          case 6:
          case 9:
          case 11:
            monthDays = 30;
            break;
        }
        let days = [];
        for (let i = 0; i < monthDays; i++) {
          days.push(leftPad0(i + 1, 2) + "日");
        }
        this.setData({
          pickerYear: year,
          pickerMonth: month,
          "rangeValues[2]": days
        });
      },
      handleCancel(e) {
        this.setData({
          valueArray: this.data.valueArray
        })
      },
      handleColumnChange(e) {
        if (e.detail.column > 1) return false;
        let year = this.data.pickerYear;
        let month = this.data.pickerMonth;
        if (e.detail.column == 0) {
          year = e.detail.value + beginYear;
        } else if (e.detail.column == 1) {
          month = e.detail.value + 1;
        }
        this._settMonthDays(year, month);
      },
      handleValueChange(e) {
        let dateArr = [];
        for (let i in e.detail.value) {
          let v = this.data.rangeValues[i][e.detail.value[i]];
          dateArr.push(v.toString().substr(0, v.length - 1))
        }
        let dateString = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + " " + dateArr[3] + ":" + dateArr[4];
        dateString = this.data.showSecond && dateString + ":00" || dateString;
        this.triggerEvent('change', {
          date: stringToDate(dateString),
          value: dateString
        })
      }
    }
  })

• 例子：

  //test.json
  {
    "usingComponents": {
      "date-time-picker": "/components/date-time-picker2/date-time-picker"
    }
  }
  
  //test.wxml
  <date-time-picker startYear="now" value="{{value}}" bind:change="handleChange">时间：{{value}}</date-time-picker>
  
  //test.js
  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
      value: "2019-11-11 11:11:00"
    },
    handleChange(e) {
      console.log(e)
      this.setData({
        value: e.detail.value
      })
    }
  })

• 效果