【無標(biāo)題】小程序picker實(shí)現(xiàn)時(shí)間日期的選擇（精確到時(shí)分）

這篇具有很好參考價(jià)值的文章主要介紹了【無標(biāo)題】小程序picker實(shí)現(xiàn)時(shí)間日期的選擇（精確到時(shí)分）。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

文章出處：(6條消息) [微信小程序] 原生小程序picker組件實(shí)現(xiàn)時(shí)間日期的選擇_小程序 picker date_iChangebaobao的博客-CSDN博客

<view style="height:100rpx;"></view>
<picker  mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
	 {{time}}
	<view class="triangle_border_down"> </view>
</picker>

js文件

const DatePickerUtil = require('../../utils/DatePicker.js')

Page({
  data: {
    time: '選擇預(yù)約時(shí)間',
    multiArray: [],//piker的item項(xiàng)
    multiIndex: [],//當(dāng)前選擇列的下標(biāo)
    year: '',//選擇的年
    month: '',//選擇的月
    day: '',//選擇的日
    hour: '',//選擇的時(shí)
    minute: '',//選擇的分
  },
  onShow: function () {
    //獲取 DatePickerUtil 工具下的方法
    var loadPickerData = DatePickerUtil.loadPickerData()
    var getCurrentDate = DatePickerUtil.getCurrentDate()
    var GetMultiIndex = DatePickerUtil.GetMultiIndex()

    //這里寫的是為了記錄當(dāng)前時(shí)間
    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數(shù)組賦值，格式 [years, months, days, hours, minutes]
      multiIndex: GetMultiIndex,//設(shè)置pickerIndex，[0,0,0,0,0]
      time: getCurrentDate, //設(shè)置當(dāng)前時(shí)間 ，currentYears+'-'+mm+'-'+dd+' '+hh+':'+min
      year: year,//記錄選擇的年
      month: month,//記錄選擇的月
      day: day,//記錄選擇的日
      hour: hour,//記錄選擇的時(shí)
      minute: minute,//記錄選擇的分 
    });

  },
  bindMultiPickerChange: function (e) { //時(shí)間日期picker選擇改變后，點(diǎn)擊確定 
    // console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
    const index = this.data.multiIndex; // 當(dāng)前選擇列的下標(biāo)
    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('時(shí)', '') + ':' + minute.replace('分', ''),
      year: year, //記錄選擇的年
      month: month, //記錄選擇的月
      day: day, //記錄選擇的日
      hour: hour, //記錄選擇的時(shí)
      minute: minute, //記錄選擇的分 
    })
    //console.log(this.data.time); 
  },
  bindMultiPickerColumnChange: function (e) { //監(jiān)聽picker的滾動事件

    // console.log('修改的列為', e.detail.column, '，值為', e.detail.value);

    let getCurrentDate = DatePickerUtil.getCurrentDate();//獲取現(xiàn)在時(shí)間  
    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]);//當(dāng)前選擇的年份

      this.setData({
        multiIndex: [0, 0, 0, 0, 0],//設(shè)置pickerIndex
        year: yearSelected //當(dāng)前選擇的年份
      });

      if (yearSelected == currentYear) {//當(dāng)前選擇的年份==當(dāng)前年份  
        var loadPickerData = DatePickerUtil.loadPickerData();

        this.setData({
          multiArray: loadPickerData,//picker數(shù)組賦值
          multiIndex: [0, 0, 0, 0, 0] //設(shè)置pickerIndex
        });

      } else {  // 選擇的年份！=當(dāng)前年份 

        // 處理月份
        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]); //當(dāng)前選擇的月份
      this.setData({
        month: mon  // 記錄當(dāng)前列
      })

      if (mon == currentMonth) {//選擇的月份==當(dāng)前月份 
        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 {  // 選擇的月份！=當(dāng)前月份 
        // 處理日期
        let dayArr = DatePickerUtil.loadDays(this.data.year, mon, 1) // 傳入當(dāng)前年份，當(dāng)前選擇的月份去計(jì)算日
        // 處理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]);//當(dāng)前選擇的日
      this.setData({
        day: dd
      })
      if (dd == currentDay) {//選擇的日==當(dāng)前日
        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 {  // 選擇的日！=當(dāng)前日 
        // 處理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) {//修改時(shí)
      let hh = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //當(dāng)前選擇的時(shí)
      this.setData({
        hour: hh
      })
      if (hh == currentHour) {//選擇的時(shí)==當(dāng)前時(shí) 
        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 {//選擇的時(shí)！=當(dāng)前時(shí) 
        // 處理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文件文章來源地址http://www.zghlxwxcb.cn/news/detail-696050.html

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
function getCurrentDate(){// 獲取當(dāng)前時(shí)間
  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(){ //一點(diǎn)開picker的選中設(shè)置  
 
  return [0,0,0,0,0]; //現(xiàn)在全部列，默認(rèn)選第一個(gè)選項(xiàng),其實(shí)這一步多余，可以直接在data里面定義 
} 
 
function loadYears(startYear,endYear){//獲取年份 
  /**
   * params參數(shù)
   * startYear 當(dāng)前年份
   * endYear 循環(huán)結(jié)束月份 ，比如 5 年內(nèi) newDate().getFullYear() + 4，客戶說只能預(yù)約兩年內(nèi) 
   * return 年份數(shù)組
  */
  let years=[];
  for (let i = startYear; i <= endYear; i++) {
    years.push("" + i+"年");
  } 
  // console.log(years,'years');
  return years;//返回年份數(shù)組 
}


function loadMonths(startMonth,endMonth){//獲取月份
  // console.log(startMonth,endMonth,'startMonth,endMonth');
   /**
   * params參數(shù)
   * startMonth 當(dāng)前月份
   * endMonth 循環(huán)結(jié)束月份，一般為 12個(gè)月
   * return 月份數(shù)組
  */ 
  let months=[];
  for (let i = startMonth; i <= endMonth; i++) {
    if (i < 10) {
      i = "0" + i;
    }
    months.push("" + i+"月");
  } 
  // console.log(months,'months');
  return months;//返回月份數(shù)組 
}


function loadDays(yearSelected,selectedMonths,startDay){ //獲取日期  
  /**
   * params參數(shù)
   * currentYears 當(dāng)前年份
   * selectedMonths 當(dāng)前選擇的月份
   * startDay   循環(huán)開始日 一般為1號， 希望從當(dāng)前月份開始 ，startDay=currentDay
   * return 日期數(shù)組
  */
//  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月份天數(shù)
      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;//返回日期數(shù)組
}


function loadHours(startHour,endHour){//獲取小時(shí)
   /**
   * params參數(shù)
   * startHour 循環(huán)開始小時(shí) 一般為 0點(diǎn)， 希望從當(dāng)前小時(shí)開始 startHour=currentHours
   * endHour 循環(huán)當(dāng)前小時(shí) ,一般為24個(gè)小時(shí)
   * return 小時(shí)數(shù)組
  */ 
  let hours=[];
   for (let i = startHour; i < endHour ; i++) {
    if (i < 10) {//看需求要不要加在前面+‘0’
      i = "0" + i;
    }
    hours.push("" + i+"時(shí)");
  }
  return hours;//返回小時(shí)數(shù)組 
}


function loadMinutes(startMinute,endMinute){//獲取分鐘
  /**
   * params參數(shù)
   * startMinute 循環(huán)開始分鐘 一般為 0 開始，從當(dāng)前分鐘開始 startMinute=currentMinutes
   * endMinute 循環(huán)當(dāng)前秒 ，一般為60分鐘
   * return 分鐘數(shù)組
  */  
 let minutes=[];
  for (let i = startMinute; i < endMinute ; i++) {
   if (i < 10) {
     i = "0" + i;
   }
   minutes.push("" + i+"分");
 }
 return minutes;//返回分鐘數(shù)組 
}

//我沒有用到秒，可以參考分鐘的寫法

function loadPickerData(){ //將Picker初始數(shù)據(jù)，開始時(shí)間設(shè)置為當(dāng)前時(shí)間
  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();  
  
  // 下面調(diào)用 自定義方法 

  //獲取年份  loadYears(startYear,endYear)  
  //獲取月份  loadMonths(startMonth,endMonth)
  //獲取日期  loadDays(currentYears,currentMonths,startDay)
  //獲取小時(shí)  loadHours(startHour,endHour)
  //獲取分鐘  loadMinutes(startMinute,endMinute)
  
  let years = loadYears(currentYears,date1.getFullYear() + 100)  //客戶說只能預(yù)約兩年內(nèi),+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]
}
 
//導(dǎo)出
module.exports = {
  loadPickerData:loadPickerData,
  getCurrentDate:getCurrentDate,
  GetMultiIndex:GetMultiIndex,
  loadYears:loadYears,
  loadMonths:loadMonths,
  loadDays:loadDays,
  loadHours:loadHours,
  loadMinutes:loadMinutes
}

到了這里，關(guān)于【無標(biāo)題】小程序picker實(shí)現(xiàn)時(shí)間日期的選擇（精確到時(shí)分）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！