【无标题】小程序picker实现时间日期的选择（精确到时分）

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

 {{time}} 

js文件

const DatePickerUtil = require('../../utils/DatePicker.js')Page({  data: {    time: '选择预约时间',    multiArray: [],//piker的item项    multiIndex: [],//当前选择列的下标    year: '',//选择的年    month: '',//选择的月    day: '',//选择的日    hour: '',//选择的时    minute: '',//选择的分  },  onShow: function () {    //获取 DatePickerUtil 工具下的方法    var loadPickerData = DatePickerUtil.loadPickerData()    var getCurrentDate = DatePickerUtil.getCurrentDate()    var GetMultiIndex = DatePickerUtil.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));    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 + month + day + ' ' + 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 = 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));    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 = 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);        // 处理minute        let minuteArr = DatePickerUtil.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 = DatePickerUtil.loadDays(currentYear, mon, currentDay)          // 处理hour          let hourArr = DatePickerUtil.loadHours(currentHour, 24);          // 处理minute          let minuteArr = DatePickerUtil.loadMinutes(currentMinute, 60)          this.setData({            ['multiArray[2]']: dayArr,            ['multiArray[3]']: hourArr,            ['multiArray[4]']: minuteArr          })        } else {          // 处理日期          let dayArr = DatePickerUtil.loadDays(this.data.year, mon, 1)          // 处理hour          let hourArr = DatePickerUtil.loadHours(0, 24);          // 处理minute          let minuteArr = DatePickerUtil.loadMinutes(0, 60)          this.setData({            ['multiArray[2]']: dayArr,            ['multiArray[3]']: hourArr,            ['multiArray[4]']: minuteArr          });        }      } else {  // 选择的月份！=当前月份         // 处理日期        let dayArr = DatePickerUtil.loadDays(this.data.year, mon, 1) // 传入当前年份，当前选择的月份去计算日        // 处理hour        let hourArr = DatePickerUtil.loadHours(0, 24);        // 处理minute        let minuteArr = DatePickerUtil.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 = DatePickerUtil.loadHours(currentHour, 24);          // 处理minute          let minuteArr = DatePickerUtil.loadMinutes(currentMinute, 60)          this.setData({            ['multiArray[3]']: hourArr,            ['multiArray[4]']: minuteArr          });        } else { //选择的不是今天           // 处理hour          let hourArr = DatePickerUtil.loadHours(0, 24);          // 处理minute          let minuteArr = DatePickerUtil.loadMinutes(0, 60)          this.setData({            ['multiArray[3]']: hourArr,            ['multiArray[4]']: minuteArr          });        }      } else {  // 选择的日！=当前日         // 处理hour        let hourArr = DatePickerUtil.loadHours(0, 24);        // 处理minute        let minuteArr = DatePickerUtil.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 = DatePickerUtil.loadMinutes(currentMinute, 60)          this.setData({            ['multiArray[4]']: minuteArr          });        } else { // 选择的不是今天          // 处理minute          let minuteArr = DatePickerUtil.loadMinutes(0, 60)          this.setData({            ['multiArray[4]']: minuteArr          });        }      } else {//选择的时！=当前时         // 处理minute        let minuteArr = DatePickerUtil.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);  //将值赋回去  }})

DatePicker.js文件

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;}function GetMultiIndex(){ //一点开picker的选中设置     return [0,0,0,0,0]; //现在全部列，默认选第一个选项,其实这一步多余，可以直接在data里面定义 }  function loadYears(startYear,endYear){//获取年份     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');      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){ //获取日期    //  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){//获取小时      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){//获取分钟     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]} //导出module.exports = {  loadPickerData:loadPickerData,  getCurrentDate:getCurrentDate,  GetMultiIndex:GetMultiIndex,  loadYears:loadYears,  loadMonths:loadMonths,  loadDays:loadDays,  loadHours:loadHours,  loadMinutes:loadMinutes}

来源地址：https://blog.csdn.net/m0_45215325/article/details/131556168