微信小程序自定义封装picker实现直接显示年月日时分

效果如入下：

第一步，封装datepicker.js，可放在utils文件夹下。代码如下：

 

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
function getCurrentDate(){// 获取当前时间
  let date = new Date();   
  let currentYears=date.getFullYear();
  let currentMonths=date.getMonth()+1;
  let currentDay=date.getDate();
  let currentHours=date.getHours();
  let currentMinute=date.getMinutes();   
  
  var year=[currentYears].map(formatNumber)
  var mm=[currentMonths].map(formatNumber)
  var dd=[currentDay].map(formatNumber)
  var hh=[currentHours].map(formatNumber)
  var min=[currentMinute].map(formatNumber) 
  // return year+'年'+mm+'月'+dd+'日'+hh+':'+min;
  return year+'-'+mm+'-'+dd+' '+hh+':'+min; //2023-08-23-09:43
}
 
function GetMultiIndex(){ //一点开picker的选中设置  
	let arr=loadPickerData()
	console.log(arr);
	let date = new Date();   
	let currentYears=date.getFullYear();
  let currentMonths=date.getMonth()+1;
  let currentDay=date.getDate();
  let currentHours=date.getHours();
	let currentMinute=date.getMinutes();  
	console.log(currentYears);
	let yearindex=0
	let monthindex=0
	let dayindex=0
	let hoursindex=0
	let minuteindex=0
	arr.forEach((item,index)=>{
		switch (index) {
			case 0:
					currentYears=currentYears+'年'
					yearindex =item.indexOf(currentYears)
				break;
			case 1:
					currentMonths=[currentMonths].map(formatNumber)+'月'
					monthindex =item.indexOf(currentMonths)
				break;
			case 2:
					currentDay=[currentDay].map(formatNumber)+'日'
					dayindex =item.indexOf(currentDay)
				break;
			case 3:
					currentHours=[currentHours].map(formatNumber)+'时'
					hoursindex =item.indexOf(currentHours)
				break;
			case 4:
					currentMinute=[currentMinute].map(formatNumber)+'分'
					minuteindex =item.indexOf(currentMinute)
				break;
			default:
				break;
		}
	})
	//现在全部列，默认选第一个选项,可以直接在data里面定义 
	return [yearindex,monthindex,dayindex,hoursindex,minuteindex];
} 
 
function loadYears(startYear,endYear){//获取年份 
  /**
   * params参数
   * startYear 当前年份
   * endYear 循环结束月份 ，比如 5 年内 newDate().getFullYear() + 4，客户说只能预约两年内 
   * return 年份数组
  */
  let years=[];
  for (let i = startYear; i <= endYear; i++) {
    years.push("" + i+"年");
  } 
  // console.log(years,'years');
  return years;//返回年份数组 
}
 
 
function loadMonths(startMonth,endMonth){//获取月份
  // console.log(startMonth,endMonth,'startMonth,endMonth');
   /**
   * params参数
   * startMonth 当前月份
   * endMonth 循环结束月份，一般为 12个月
   * return 月份数组
  */ 
  let months=[];
  for (let i = startMonth; i <= endMonth; i++) {
    if (i < 10) {
      i = "0" + i;
    }
    months.push("" + i+"月");
  } 
  // console.log(months,'months');
  return months;//返回月份数组 
}
 
 
function loadDays(yearSelected,selectedMonths,startDay){ //获取日期  
  /**
   * params参数
   * currentYears 当前年份
   * selectedMonths 当前选择的月份
   * startDay   循环开始日 一般为1号， 希望从当前月份开始 ，startDay=currentDay
   * return 日期数组
  */
//  console.log(currentYears,selectedMonths,startDay,'111');
    let days=[];
    if (selectedMonths == 1 || selectedMonths == 3 || selectedMonths == 5 || selectedMonths == 7 || selectedMonths == 8 || selectedMonths == 10 || selectedMonths == 12) { //判断31天的月份，可以用正则简化
      for (let i = startDay; i <= 31; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        days.push("" + i+'日');
      } 
    } else if (selectedMonths == 4 || selectedMonths == 6 || selectedMonths == 9 || selectedMonths == 11) { //判断30天的月份
      for (let i = startDay; i <= 30; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        days.push("" + i+'日');
      } 
    } else if (selectedMonths == 2) { //判断2月份天数
      console.log('2月');
      let year = yearSelected 
      console.log(year,'year');
      if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {//闰年
        for (let i = startDay; i <= 29; i++) {
          if (i < 10) {
            i = "0" + i;
          }
          days.push("" + i+'日');
        }
      } else {//不是闰年
        for (let i = startDay; i <= 28; i++) {
          if (i < 10) {
            i = "0" + i;
          }
          days.push("" + i+'日');
        } 
      }
    }
    console.log(days,'days');
    return days;//返回日期数组
}
 
 
function loadHours(startHour,endHour){//获取小时
   /**
   * params参数
   * startHour 循环开始小时 一般为 0点， 希望从当前小时开始 startHour=currentHours
   * endHour 循环当前小时 ,一般为24个小时
   * return 小时数组
  */ 
  let hours=[];
   for (let i = startHour; i < endHour ; i++) {
    if (i < 10) {//看需求要不要加在前面+‘0’
      i = "0" + i;
    }
    hours.push("" + i+"时");
  }
  return hours;//返回小时数组 
}
 
 
function loadMinutes(startMinute,endMinute){//获取分钟
  /**
   * params参数
   * startMinute 循环开始分钟 一般为 0 开始，从当前分钟开始 startMinute=currentMinutes
   * endMinute 循环当前秒 ，一般为60分钟
   * return 分钟数组
  */  
 let minutes=[];
  for (let i = startMinute; i < endMinute ; i++) {
   if (i < 10) {
     i = "0" + i;
   }
   minutes.push("" + i+"分");
 }
 return minutes;//返回分钟数组 
}
 
//我没有用到秒，可以参考分钟的写法
 
function loadPickerData(){ //将Picker初始数据，开始时间设置为当前时间
  let date1 = new Date();   
  let currentYears=date1.getFullYear();
  let currentMonths=date1.getMonth()+1;
  let currentDay=date1.getDate();
  let currentHours=date1.getHours();
  let currentMinute=date1.getMinutes();  
  
  // 下面调用 自定义方法 
 
  //获取年份  loadYears(startYear,endYear)  
  //获取月份  loadMonths(startMonth,endMonth)
  //获取日期  loadDays(currentYears,currentMonths,startDay)
  //获取小时  loadHours(startHour,endHour)
  //获取分钟  loadMinutes(startMinute,endMinute)
  
  let years = loadYears(currentYears-2,date1.getFullYear() + 100)  //修改起始年份在两年前
  let months = loadMonths(1,12)   
  let days = loadDays(currentYears,currentMonths,1)  
  let hours = loadHours(0,24)  
  let minutes =  loadMinutes(0,60)
  return [years, months, days, hours, minutes]
}
 
//导出
module.exports = {
  loadPickerData:loadPickerData,
  getCurrentDate:getCurrentDate,
  GetMultiIndex:GetMultiIndex,
  loadYears:loadYears,
  loadMonths:loadMonths,
  loadDays:loadDays,
  loadHours:loadHours,
  loadMinutes:loadMinutes
}
 

第二步，wxml代码：

<picker  mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
	 {{time}}
	<view class="triangle_border_down"> </view>
</picker>

js代码：

const datepicker = require('../datepicker/datepicker')
 
Page({
  data: {
    time: '选择预约时间',
    multiArray: [],//piker的item项
    multiIndex: [],//当前选择列的下标
    year: '',//选择的年
    month: '',//选择的月
    day: '',//选择的日
    hour: '',//选择的时
    minute: '',//选择的分
  },
  onShow: function () {
    //获取 datepicker 工具下的方法
    var loadPickerData = datepicker.loadPickerData()
    var getCurrentDate = datepicker.getCurrentDate()
    var GetMultiIndex = datepicker.GetMultiIndex()
 
    //这里写的是为了记录当前时间
    let year = parseInt(getCurrentDate.substring(0, 4));
    let month = parseInt(getCurrentDate.substring(5, 7));
    let day = parseInt(getCurrentDate.substring(8, 10));
    let hour = parseInt(getCurrentDate.substring(11, 13));
    let minute = parseInt(getCurrentDate.substring(14, 16));
    console.log(getCurrentDate);
    this.setData({
      multiArray: loadPickerData,//picker数组赋值，格式 [years, months, days, hours, minutes]
      multiIndex: GetMultiIndex,//设置pickerIndex，[0,0,0,0,0]
      time: getCurrentDate, //设置当前时间 ，currentYears+'-'+mm+'-'+dd+' '+hh+':'+min
      year: year,//记录选择的年
      month: month,//记录选择的月
      day: day,//记录选择的日
      hour: hour,//记录选择的时
      minute: minute,//记录选择的分 
    });
 
  },
  bindMultiPickerChange: function (e) { //时间日期picker选择改变后，点击确定 
    // 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.replace('年', '-') + month.replace('月', '-') + day.replace('日', '') + ' ' + hour.replace('时', '') + ':' + minute.replace('分', ''),
      year: year, //记录选择的年
      month: month, //记录选择的月
      day: day, //记录选择的日
      hour: hour, //记录选择的时
      minute: minute, //记录选择的分 
    })
    //console.log(this.data.time); 
  },
  bindMultiPickerColumnChange: function (e) { //监听picker的滚动事件
 
    // console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
 
    let getCurrentDate = datepicker.getCurrentDate();//获取现在时间  
    let currentYear = parseInt(getCurrentDate.substring(0, 4));
    let currentMonth = parseInt(getCurrentDate.substring(5, 7));
    let currentDay = parseInt(getCurrentDate.substring(8, 10));
    let currentHour = parseInt(getCurrentDate.substring(11, 13));
    let currentMinute = parseInt(getCurrentDate.substring(14, 16));
 
    if (e.detail.column == 0) {//修改年份列 
      let yearSelected = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);//当前选择的年份
 
      this.setData({
        multiIndex: [0, 0, 0, 0, 0],//设置pickerIndex
        year: yearSelected //当前选择的年份
      });
 
      if (yearSelected == currentYear) {//当前选择的年份==当前年份  
        var loadPickerData = datepicker.loadPickerData();
 
        this.setData({
          multiArray: loadPickerData,//picker数组赋值
          multiIndex: [0, 0, 0, 0, 0] //设置pickerIndex
        });
 
      } else {  // 选择的年份！=当前年份 
 
        // 处理月份
        let monthArr = datepicker.loadMonths(1, 12)
        // 处理日期
        let dayArr = datepicker.loadDays(currentYear, currentMonth, 1)
        // 处理hour
        let hourArr = datepicker.loadHours(0, 24);
        // 处理minute
        let minuteArr = datepicker.loadMinutes(0, 60)
 
        // 给每列赋值回去
        this.setData({
          ['multiArray[1]']: monthArr,
          ['multiArray[2]']: dayArr,
          ['multiArray[3]']: hourArr,
          ['multiArray[4]']: minuteArr
        });
      }
    }
    if (e.detail.column == 1) {//修改月份列
      let mon = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //当前选择的月份
      this.setData({
        month: mon  // 记录当前列
      })
 
      if (mon == currentMonth) {//选择的月份==当前月份 
        if (this.data.year == currentYear) {
 
          // 处理日期
          let dayArr = datepicker.loadDays(currentYear, mon, currentDay)
          // 处理hour
          let hourArr = datepicker.loadHours(currentHour, 24);
          // 处理minute
          let minuteArr = datepicker.loadMinutes(currentMinute, 60)
 
          this.setData({
            ['multiArray[2]']: dayArr,
            ['multiArray[3]']: hourArr,
            ['multiArray[4]']: minuteArr
          })
        } else {
          // 处理日期
          let dayArr = datepicker.loadDays(this.data.year, mon, 1)
          // 处理hour
          let hourArr = datepicker.loadHours(0, 24);
          // 处理minute
          let minuteArr = datepicker.loadMinutes(0, 60)
 
          this.setData({
            ['multiArray[2]']: dayArr,
            ['multiArray[3]']: hourArr,
            ['multiArray[4]']: minuteArr
          });
        }
      } else {  // 选择的月份！=当前月份 
        // 处理日期
        let dayArr = datepicker.loadDays(this.data.year, mon, 1) // 传入当前年份，当前选择的月份去计算日
        // 处理hour
        let hourArr = datepicker.loadHours(0, 24);
        // 处理minute
        let minuteArr = datepicker.loadMinutes(0, 60)
console.log(dayArr,'日期');
        this.setData({
          ['multiArray[2]']: dayArr,
          ['multiArray[3]']: hourArr,
          ['multiArray[4]']: minuteArr
        });
      }
    }
    if (e.detail.column == 2) {//修改日
      let dd = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);//当前选择的日
      this.setData({
        day: dd
      })
      if (dd == currentDay) {//选择的日==当前日
        if (this.data.year == currentYear && this.data.month == currentMonth) {//选择的是今天 
 
          // 处理hour
          let hourArr = datepicker.loadHours(currentHour, 24);
          // 处理minute
          let minuteArr = datepicker.loadMinutes(currentMinute, 60)
 
          this.setData({
            ['multiArray[3]']: hourArr,
            ['multiArray[4]']: minuteArr
          });
 
        } else { //选择的不是今天 
          // 处理hour
          let hourArr = datepicker.loadHours(0, 24);
          // 处理minute
          let minuteArr = datepicker.loadMinutes(0, 60)
 
          this.setData({
            ['multiArray[3]']: hourArr,
            ['multiArray[4]']: minuteArr
          });
        }
      } else {  // 选择的日！=当前日 
        // 处理hour
        let hourArr = datepicker.loadHours(0, 24);
        // 处理minute
        let minuteArr = datepicker.loadMinutes(0, 60)
 
        this.setData({
          ['multiArray[3]']: hourArr,
          ['multiArray[4]']: minuteArr
        });
      }
    }
    if (e.detail.column == 3) {//修改时
      let hh = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //当前选择的时
      this.setData({
        hour: hh
      })
      if (hh == currentHour) {//选择的时==当前时 
        if (this.data.year == currentYear && this.data.month == currentMonth && this.data.month == currentMonth) {   // 选择的是今天
          // 处理minute
          let minuteArr = datepicker.loadMinutes(currentMinute, 60)
          this.setData({
            ['multiArray[4]']: minuteArr
          });
        } else { // 选择的不是今天
 
          // 处理minute
          let minuteArr = datepicker.loadMinutes(0, 60)
          this.setData({
            ['multiArray[4]']: minuteArr
          });
        }
      } else {//选择的时！=当前时 
        // 处理minute
        let minuteArr = datepicker.loadMinutes(0, 60)
        this.setData({
          ['multiArray[4]']: minuteArr
        });
      }
    }
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value; //将值赋回去
    this.setData(data);  //将值赋回去
  }
})