微信小程序年月日时分选择器

默认显示并返回当前时间

 

wxml部分

 

<picker mode="multiSelector" value="{{valueArray}}" range="{{rangeValues}}" bindcolumnchange="handleColumnChange"

  bindchange="handleValueChange" bindcancel="handleCancel">

  <text style="font-size: 32rpx;">{{dateString}}</text>

  <slot></slot>

  <text class="iconx1 icon-xiala"></text>

</picker>

 

js部分

 

const leftPad0 = function (v, n) {

  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();

const years = [];

const beginYear = 1990;

// 如果需要更多年份，把下行的 i 赋值为起始年份，并使其<=你需要的终止年份

for (var i = now.getFullYear(); i <= now.getFullYear(); i++) {

  years.push(i + "年");

}

const months = [];

let nowMonth = now.getMonth()

// 如果需要更多月份，把下行的 i 赋值为 0

for (var i = nowMonth; i < 12; i++) {

  months.push(leftPad0(i + 1, 2) + "月");

}

const days = [];

let nowDay = now.getDate()

// console.log(nowDay)

for (var i = 1; i <= 31; i++) {

  days.push(leftPad0(i, 2) + "日");

}

// console.log(days)

const hours = [];

let nowHour = now.getHours()

// console.log(nowHour)

for (var i = 0; i < 24; i++) {

  hours.push(leftPad0(i, 2) + "时");

}

const minutes = [];

let nowMinute = now.getMinutes()

// console.log(nowMinute)

for (var i = 0; i < 60; i++) {

  minutes.push(leftPad0(i, 2) + "分");

}

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    value: String,

    dateValue: {

      type: Date

    }

  },

  /**

   * 组件的初始数据

   */

  data: {

    valueArray: [0, 0, 0, 0, 0],

    rangeValues: [

      years,

      months,

      days,

      hours,

      minutes

    ],

    pickerYear: beginYear,

    pickerMonth: 1,

    dateString: ''

  },

  observers: {

    value: function (v) {

      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.nowTime()

  },

  /**

   * 组件的方法列表

   */

  methods: {

    // 当前时间回显并默认发送当前时间

    nowTime(){

      let arr = []

      let nowtime = [now.getFullYear()+ "年",leftPad0(now.getMonth() + 1, 2) + "月",leftPad0(now.getDate(), 2) + "日",leftPad0(now.getHours(), 2) + "时",leftPad0(now.getMinutes(), 2) + "分"]

      for(let i in nowtime){

          for(let j in this.data.rangeValues[i]){

            if(this.data.rangeValues[i][j] == nowtime[i]){

              arr.push(Number(j))

            }

          }

      }

      let dateArr = []

      for (let i in arr) {

        let v = this.data.rangeValues[i][arr[i]];

        dateArr.push(v.toString().substr(0, v.length - 1))

      }

      let dateString = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + " " + dateArr[3] + ":" + dateArr[4];

      let dateStrings = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + "T" + dateArr[3] + ":" + dateArr[4] + ":" + "00.000Z";

      this.setData({

        dateString,

        valueArray:arr

      })

      this.triggerEvent('change', {

        date: stringToDate(dateString),

        dateString,

        dateStrings

      })

    },

    _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 = Number(this.data.rangeValues[1][e.detail.value].split('月')[0]);

      }

      this._settMonthDays(year, month);

    },

    handleValueChange(e) {

      console.log(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];

      let dateStrings = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + "T" + dateArr[3] + ":" + dateArr[4] + ":" + "00.000Z";

      this.setData({

        dateString

      })

      this.triggerEvent('change', {

        date: stringToDate(dateString),

        dateString,

        dateStrings

      })

    }

  }

})

 

wxss部分

 

无