封装小程序时间组件（精确到时）

在components中创建子组件date

wxml文件：

<picker  mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
   <view wx:if="{{time!=''}}" class="picker-area">{{time}}</view>
   <view wx:else class="picker-area">请选择</view>
</picker>

js文件

const DatePickerUtil = require('../utils/DatePicker')根据自己文件存放路径进行引入（DatePicker文件放在下面了）

const DatePickerUtil = require('../utils/DatePicker')
const date = new Date();
const year = [];
const month = [];
const day = [];
const hour = [];
//获取年
for (let i = date.getFullYear(); i <= 3300; i++) {
  year.push("" + i+"年");
}
//获取月份
for (let i = 1; i <= 12; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  month.push("" + i+"月");
}
//获取日期
for (let i = 1; i <= 31; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  day.push("" + i+'日');
}
//获取小时
for (let i = 0; i < 24; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  hour.push("" + i+"时");
}

Page({
  data: {
    time: '',
    multiArray: [year, month, day, hour],
    multiIndex: [0, date.getMonth(), date.getDate()-1, date.getHours()],//显示当前时间
  },
  onLoad: function() {
     console.log();
    //设置默认的年份
    this.setData({
      choose_year: this.data.multiArray[0][0]
    })
  },
  bindMultiPickerChange: function (e) { //时间日期picker选择改变后，点击确定 
   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]];
   this.setData({
     time: year + month + day + hour,
     year: year, //记录选择的年
     month: month, //记录选择的月
     day: day, //记录选择的日
     hour: hour, //记录选择的时
   })
   this.triggerEvent('myevent',year + month + day + hour)
 
 },
 bindMultiPickerColumnChange: function (e) { //监听picker的滚动事件
   let getCurrentDate = DatePickerUtil.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));
   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 = DatePickerUtil.loadPickerData();
       this.setData({
         multiArray: loadPickerData,//picker数组赋值
         multiIndex: [0, 0, 0, 0, 0] //设置pickerIndex
       });
     } else {  // 选择的年份！=当前年份 
       // 处理月份
       let monthArr = DatePickerUtil.loadMonths(1, 12)
       // 处理日期
       let dayArr = DatePickerUtil.loadDays(currentYear, currentMonth, 1)
       // 处理hour
       let hourArr = DatePickerUtil.loadHours(0, 24);
       // 给每列赋值回去
       this.setData({
         ['multiArray[1]']: monthArr,
         ['multiArray[2]']: dayArr,
         ['multiArray[3]']: hourArr,
       });
     }
   }
   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 = DatePickerUtil.loadDays(currentYear, mon, currentDay)
         // 处理hour
         let hourArr = DatePickerUtil.loadHours(currentHour, 24);
         this.setData({
           ['multiArray[2]']: dayArr,
           ['multiArray[3]']: hourArr, 
         })
       } else {
         // 处理日期
         let dayArr = DatePickerUtil.loadDays(this.data.year, mon, 1)
         // 处理hour
         let hourArr = DatePickerUtil.loadHours(0, 24);
         this.setData({
           ['multiArray[2]']: dayArr,
           ['multiArray[3]']: hourArr,
         });
       }
     } else {  // 选择的月份！=当前月份 
       // 处理日期
       let dayArr = DatePickerUtil.loadDays(this.data.year, mon, 1) // 传入当前年份，当前选择的月份去计算日
       // 处理hour
       let hourArr = DatePickerUtil.loadHours(0, 24);
console.log(dayArr,'日期');
       this.setData({
         ['multiArray[2]']: dayArr,
         ['multiArray[3]']: hourArr,

       });
     }
   }
   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 = DatePickerUtil.loadHours(currentHour, 24);
         this.setData({
           ['multiArray[3]']: hourArr,
         });
       } else { //选择的不是今天 
         // 处理hour
         let hourArr = DatePickerUtil.loadHours(0, 24);
         this.setData({
           ['multiArray[3]']: hourArr,
         });
       }
     } else {  // 选择的日！=当前日 
       // 处理hour
       let hourArr = DatePickerUtil.loadHours(0, 24);
       this.setData({
         ['multiArray[3]']: hourArr,
       });
     }
   }
   if (e.detail.column == 3) {//修改时
     let hh = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //当前选择的时
     this.setData({
       hour: hh
     })
   }
   var data = {
     multiArray: this.data.multiArray,
     multiIndex: this.data.multiIndex
   };
   data.multiIndex[e.detail.column] = e.detail.value; //将值赋回去
   this.setData(data);  //将值赋回去
 }
})

  this.triggerEvent('myevent',year + month + day + hour)

调用 this.triggerEvent向父组件传递参数事件

json文件

{
  "component": true,
  "usingComponents": {}
}

父组件

bind:myevent="onMyEvent"为引用的子组件事件

<view wx:for="{{10}}" wx:for-item="item" wx:key="index">
<date bind:myevent="onMyEvent" data-item="{{item}}"></date>
</view>

   onMyEvent(e) {
      console.log(e, 'e');
   },

 引用子组件

{
  "usingComponents": {
   "date":"../../components/date"
  }
}

DatePicker文件

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;
 }
 
 function GetMultiIndex(){ //一点开picker的选中设置  
   return [0,0,0,0];
   // return [0,0,0,0,0]; //现在全部列，默认选第一个选项,其实这一步多余，可以直接在data里面定义 
 } 
  
 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,date1.getFullYear() + 100)  //客户说只能预约两年内,+1
   let months = loadMonths(currentMonths,12)   
   let days = loadDays(currentYears,currentMonths,currentDay)  
   let hours = loadHours(currentHours,24)  
   // let minutes =  loadMinutes(currentMinute,60)
   
   // return [years, months, days, hours, minutes]
   return [years, months, days, hours]
 }
  
 //导出
 module.exports = {
   loadPickerData:loadPickerData,
   getCurrentDate:getCurrentDate,
   GetMultiIndex:GetMultiIndex,
   loadYears:loadYears,
   loadMonths:loadMonths,
   loadDays:loadDays,
   loadHours:loadHours,
   loadMinutes:loadMinutes
 }
 
 

文章引用：(6条消息) [微信小程序] 原生小程序picker组件实现时间日期的选择_小程序 picker date_iChangebaobao的博客-CSDN博客

 微信小程序之picker选择器实现时间日期的选择（已修改） - 简书 (jianshu.com)