微信小程序日期与时间选择器

最近在开发一款微信小程序，需要用到里面的时间选择器（picker），根据它本身的特点以及需要开发的内容，我对时间选择器做了一个简单的demo，大家可以看一下效果图。

效果图：

在微信小程序中，文件按照功能分，有js文件（主要写核心事件）、json文件（主要写数据）、wxml（主要是页面结构）和wxss（主要是页面样式）。

index.wxml文件：

在wxml文件中引入picker，设定picker的模式、值发生改变时所绑定的事件函数、选择器列滚动时所绑定的事件函数、以及对应呈现的值等。

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

index.js文件：

在js文件中设置对应的data，同时完成onLoad事件、bindMultiPickerChange事件、bindMultiPickerColumnChange事件等。

//引入事先写好的日期设置util.js文件
var datePicker = require('../../utils/dateSetting.js')

//设定当前的时间，将其设定为常量
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;

Page({
  //与wxml中的数据一一对应，在具体函数中修改time、multiArray、multiIndex等值，进行页面的呈现
  data: {
    time: '',
    multiArray: [],
    multiIndex: [0, 0, 0, 0, 0],
    choose_year: "",
  },
  //Page原始的加载函数，设定multiArray，其中datePicker中的函数，会在下面的js中呈现。
  onLoad: function () {
    this.setData({
      multiArray:
        [
          [year + "年", year + 1 + "年", year + 2 + "年"],
          datePicker.determineMonth(),
          datePicker.determineDay(year, month),
          datePicker.determineHour(),
          datePicker.determineMinute()
        ],
    })
  },
  //最后呈现时间的函数。
  bindMultiPickerChange: function (e) {
    var dateStr = this.data.multiArray[0][this.data.multiIndex[0]] +
      this.data.multiArray[1][this.data.multiIndex[1]] +
      this.data.multiArray[2][this.data.multiIndex[2]] +
      this.data.multiArray[3][this.data.multiIndex[3]] +
      this.data.multiArray[4][this.data.multiIndex[4]];
    this.setData({
      time: dateStr
    })
  },
  //当时间选择器呈现并进行滚动选择时间时调用该函数。
  bindMultiPickerColumnChange: function (e) {
    //e.detail.column记录哪一行发生改变，e.detail.value记录改变的值（相当于multiIndex）
    switch (e.detail.column) {
      //这里case的值有0/1/2/3/4,但除了需要记录年和月来确定具体的天数外，其他的都可以暂不在switch中处理。
      case 0:
        //记录改变的年的值
        let year = this.data.multiArray[0][e.detail.value];
        this.setData({
          choose_year: year.substring(0, year.length - 1)
        })
        break;
      case 1:
        //根据选择的年与月，确定天数，并改变multiArray中天的具体值
        let month = this.data.multiArray[1][e.detail.value];
        let dayDates = datePicker.determineDay(this.data.choose_year, month.substring(0, month.length - 1));
        //这里需要额外注意，改变page中设定的data，且只要改变data中某一个值，可以采用下面这种方法
        this.setData({
          ['multiArray[2]']: dayDates
        })
        break;
    }
    //同上，上面改变的是二维数组中的某一个一维数组，这个是改变一个一维数组中某一个值，可供参考。
    this.setData({
      ["multiIndex[" + e.detail.column + "]"]: e.detail.value
    })
  },
})

utils文件夹中的dateSetting.js文件：

若出现多个时间选择器，且多个页面需要，则可以把公共的函数写出去，这里我写出去了确定月份、日、时和分的函数。

//将当前日期写成常量
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDay()+1;
const hour = date.getHours();
const minute = date.getMinutes();
//确定月份呈现
function determineMonth() {
  let monthDates = [];
  for (let i = month; i <= 12; i++) {
    monthDates.push(i + "月");
  }
  for (let i = 1; i < month; i++) {
    monthDates.push(i + "月")
  }
  return monthDates;
}
//根据年与月确定日的呈现
function determineDay(year, month) {
  let dayDates = [];
  let days;
  switch (parseInt(month)) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
      days = 31;
      break;
    case 4:
    case 6:
    case 9:
    case 11:
      days = 30;
      break;
    case 2:
      if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
        days = 28
      } else days = 29;
  }
  for (let i = day; i <= days; i++) {
    dayDates.push(i + "日");
  }
  for (let i = 1; i <= day; i++) {
    dayDates.push(i + "日");
  }
  return dayDates;
}
//确定小时的呈现
function determineHour() {
  let hourDates = [];
  for (let i = hour; i <= 24; i++) {
    hourDates.push(i + "时");
  }
  for (let i = 1; i < hour; i++) {
    hourDates.push(i + "时");
  }
  return hourDates;
}
//确定分的呈现
function determineMinute() {
  let minuteDates = [];
  let minuteNum=0;
  if (parseInt(minute) % 10 >= 5) {
    minuteNum = (parseInt(minute / 10) + 1) * 10;
  } else {
    minuteNum = parseInt(minute / 10) * 10;
  }
  for (let i = minuteNum; i < 60; i += 5) {
    minuteDates.push(i + "分")
  }
  for (let i = 0; i < minuteNum; i += 5) {
    minuteDates.push(i + "分")
  }
  return minuteDates;
}
//将上述函数导出，这样引入文件后可以直接使用导出的函数
module.exports = {
  determineMonth:determineMonth,
  determineDay:determineDay,
  determineHour:determineHour,
  determineMinute:determineMinute,
}

结束语：

上述文件完成后，进行编译运行，便可呈现效果图中的功能，希望这篇博客对你有所帮助。