使用picker-view來封裝成的一個時間選擇器
開始時間是當(dāng)前時間的一個小時之后，秒默認(rèn)是0秒

可能還有一些情況未處理，后續(xù)發(fā)現(xiàn)再更新

js文件
第一版：略繁瑣

// components/pickerTime/pickerTime.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {},

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    years: [], //年-月列表
    days: [], //日期列表
    hours: [], //小時列表
    minutes: [], //分支列表
    pickerTime: [0, 0, 0, 0], //列表選定的列集合
    timeRegion: "", //選定的時間字符串
    hList1: [], //未滿24小時（第一天的小時列表）
    hList2: [], //完整24小時（第二天的小時列表）
    mList1: [], //第一個小時的分鐘列表（不一定滿60分鐘）
    mList2: [], //滿60分鐘
    mList3: [], //最后一小時的分鐘列表（不一定滿60分鐘）
    dList: [], //日期列表（最多有兩個）
    yList: [], //年/月列表（最多有兩個）
    yTime: 0, //已選年-月索引
    dTime: 0, //已選日期索引
    hTime: 0, //已選小時索引
    mTime: 0, //已選分鐘索引
    isNext: false, //是否跨年/月
  },
  lifetimes: {
    attached: function () {
      // 在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行
      this.handleTime();
    },
  },
  /**
   * 組件的方法列表
   */
  methods: {
    // 處理時間
    handleTime() {
      // 日期
      const dList = this.handleD();
      console.log(dList, 121212);
      // 小時
      const hList = this.handleH();
      console.log(hList, 11111);
      // 分鐘
      const mList = this.handleM();
      console.log(mList, 3333);
      this.handleTimeRegion();
    },
    // 獲取當(dāng)前月有多少天
    getMonth(date) {
      let dt = new Date(date);
      const month = dt.getMonth();
      dt.setMonth(month + 1);
      dt.setDate(0);
      return dt.getDate();
    },
    // 處理分鐘列表
    handleM() {
      // 分鐘列表
      let mList1 = [],
        mList2 = [],
        mList3 = []; //分鐘列表
      const date = new Date();

      // 獲取分鐘列表
      let M = date.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)
      let H = date.getHours() + 1; //獲取當(dāng)前小時數(shù)(0-23)
      // H = 23;
      // M = 0;
      // 到60分還剩多少分鐘
      let surplusM = 60 - M;
      for (let i = 0; i < surplusM + 1; i++) {
        let mm = M + i;
        if (mm < 60) {
          mm = mm < 10 ? "0" + mm : mm;
          mList1.push(mm);
        }
      }
      //完整60分鐘
      for (let i = 0; i < 60; i++) {
        const mm = i < 10 ? "0" + i : i;
        mList2.push(mm);
      }
      // 判斷當(dāng)前是00分時，最后一個小時是00-59分
      if (M == 0) {
        M = 60;
      }
      // 最后一小時的分鐘
      for (let i = 0; i < M; i++) {
        const mm = i < 10 ? "0" + i : i;
        mList3.push(mm);
      }
      this.setData({
        mList1,
        mList2,
        mList3,
        minutes: mList1,
      });
      return [mList1, mList2, mList3];
    },
    // 處理小時列表
    handleH() {
      // 小時列表
      let hList1 = [],
        hList2 = []; //小時列表
      const date = new Date();
      // 獲取小時列表
      let H = date.getHours() + 1; //獲取當(dāng)前小時數(shù)(0-23)
      let M = date.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)
      // M = 0;
      // H = 23;
      // 到24點還剩多少小時
      let surplusH = 24 - H;
      // 當(dāng)前是零點，小時+1
      if (H == 0) {
        H++;
      }
      for (let i = 0; i < surplusH; i++) {
        let hh = H + i;
        if (hh < 24) {
          hh = hh < 10 ? "0" + hh : hh;
          hList1.push(hh);
        }
      }
      // 第二天剩余的小時
      for (let i = 0; i < H; i++) {
        const hh = i < 10 ? "0" + i : i;
        hList2.push(hh);
      }
      // 判斷當(dāng)前是00分時，第二天要去掉最后一個的一個小時
      if (M == 0) {
        hList2.pop();
      }
      // 判斷當(dāng)前是23點的，hList2添加23點的數(shù)據(jù),hList1與hList2一致
      if (H == 23) {
        hList2.push(23);
        hList1 = hList2;
      }
      this.setData({
        hList1,
        hList2,
        hours: H == 23 ? hList2 : hList1,
      });
      return [hList1, hList2];
    },
    // 處理日期列表
    handleD() {
      const date = new Date();
      let YY = date.getFullYear(); //獲取完整的年份(4位,1970-???)
      let isNext = false; //是否跨月/年
      let MM = date.getMonth() + 1; //獲取當(dāng)前月份(0-11,0代表1月),
      let H = date.getHours(); //獲取當(dāng)前小時數(shù)(0-23)
      let M = date.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)

      // H = 23;
      MM = MM < 10 ? "0" + MM : MM;
      // 返回當(dāng)月有多少天
      const allM = this.getMonth(YY + "-" + MM + "-" + "01");
      // 獲取日期列表
      let DD = date.getDate(); //獲取當(dāng)前日(1-31)
      const DDD = DD < 10 ? "0" + DD : DD;
      let dList = [DDD];
      let yList = [`${YY}-${MM}`];
      // 判斷是否是零點零分
      let isZero = H == 0 && M == 0;
      // 不是零點零分，就跨天，添加第二天
      if (!isZero) {
        // 當(dāng)天是否是最后一天，最后一天+1，就到下一個月的1號
        let dd = DD + 1 > allM ? 1 : DD + 1;
        dd = dd < 10 ? "0" + dd : dd;
        dList.push(dd);
      }
      // DD = 31;
      // MM = 12;

      // 判斷第二天是下個月的第一天,月份+1，（不是12月）
      if (DD + 1 > allM && MM != 12 && !isZero) {
        MM = Number(MM) + 1;
        yList.push(`${YY}-${MM < 10 ? "0" + MM : MM}`);
        isNext = true;
      } else if (MM == 12 && DD + 1 > allM && !isZero) {
        // 是12月份，并且是31號，年份+1，月份改為1月份
        YY = YY + 1;
        MM = "01";
        isNext = true;
        yList.push(`${YY}-${MM}`);
      }
      // 判斷是否是23點,日期列表dList刪除第一個，isNext為false，不跨年/月
      if (H == 23 && dList.length > 1) {
        dList.shift();
        isNext = false;
        // 判斷如果有跨年/月的，有的話刪除yList第一個
        if (yList.length > 1) {
          yList.shift();
        }
      }
      const days = isNext ? [dList[0]] : dList;
      this.setData({
        dList,
        days,
        years: yList,
        yList,
        isNext,
      });
      return dList;
    },
    // 切換處理
    bindChange({ detail }) {
      console.log(detail, 2222);
      const data = detail.value;
      // 索引
      let yTime = this.data.yTime;
      let dTime = this.data.dTime;
      let hTime = this.data.hTime;
      let mTime = data[3];
      // 第一個小時
      let isFirst = true;
      // 最后一個小時
      let isLast = false;
      // 年/月切換
      if (data[0] != this.data.yTime) {
        yTime = data[0];
        dTime = 0;
        hTime = 0;
        mTime = 0;
      }
      // 日期切換
      if (data[1] != this.data.dTime) {
        dTime = data[1];
        hTime = 0;
        mTime = 0;
      }
      // 小時切換
      if (data[2] != this.data.hTime) {
        hTime = data[2];
        mTime = 0;
      }
      // 分鐘切換
      if (data[3] != this.data.mTime) {
        mTime = data[3];
      }
      // 是否是第一個小時
      isFirst = dTime == 0 && hTime == 0;
      // 是否是最后一個小時
      isLast =
        dTime == this.data.days.length - 1 &&
        hTime == this.data.hours.length - 1;
      let noNextM = true;
      //當(dāng)選擇第二個月份日期
      if (data[0] == 1) {
        noNextM = false;
        // 設(shè)置不是第一個小時
        isFirst = false;
        // 判斷小時是否切換
        if (data[2] != this.data.hTime) {
          // 判斷是不是最后一個小時，不是最后一個小時，分鐘列表是滿60
          isFirst = data[2] != this.data.hours.length - 1;
        }
        // 判斷是否是最后一個鐘
        isLast = hTime == this.data.hours.length - 1;
      }
      // 判斷是否只有一個月份
      const isYears = this.data.years.length == 1;
      // days：判斷是否是只有一個月份，只有一個月份，值為整個dList；若有兩個月份的，則再判斷選擇了第一個月份（值為dList的第一個元素）還是第二個月份（值為dList的第二個元素）
      // hours：先判斷是不是選的第二個月份以及是否是第一天
      // minutes：第一天的第一個小時（值為mList1），第二天的最后一個小時（值為mList3），其他中間時間為mList2
      this.setData({
        days: isYears
          ? this.data.dList
          : yTime == 0
          ? [this.data.dList[0]]
          : [this.data.dList[1]],
        hours: dTime == 0 && noNextM ? this.data.hList1 : this.data.hList2,
        minutes: isFirst
          ? this.data.mList1
          : isLast
          ? this.data.mList3
          : this.data.mList2,
        pickerTime: [yTime, dTime, hTime, mTime],
        yTime,
        dTime,
        hTime,
        mTime,
      });
      this.handleTimeRegion();
    },
    // 處理最后生成的pickerTime字符串
    handleTimeRegion() {
      const data = this.data.pickerTime;
      const y = this.data.years[data[0]];
      const d = this.data.days[data[1]];
      const h = this.data.hours[data[2]];
      const m = this.data.minutes[data[3]];
      const timeRegion = y + "-" + d + " " + h + ":" + m + ":" + "00";
      this.setData({
        timeRegion,
      });
    },
    // 取消
    onCancel() {
      const obj = {
        timeRegion: "",
        isPicker: false,
      };
      this.triggerEvent("onselect", obj);
    },
    // 確認(rèn)
    onChecking() {
      const obj = {
        timeRegion: this.data.timeRegion,
        isPicker: true,
      };
      this.triggerEvent("onselect", obj);
    },
  },
});

第二版js文件：根據(jù)當(dāng)前時間的時間戳A與24小時之后的時間戳B兩者來進(jìn)行處理獲取對應(yīng)的列表

// components/pickerTime/pickerTime.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {},

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    years: [], //年-月列表
    days: [], //日期列表
    hours: [], //小時列表
    minutes: [], //分支列表
    pickerTime: [0, 0, 0, 0], //列表選定的列集合
    timeRegion: "", //選定的時間字符串
    hList1: [], //未滿24小時（第一天的小時列表）
    hList2: [], //完整24小時（第二天的小時列表）
    mList1: [], //第一個小時的分鐘列表（不一定滿60分鐘）
    mList2: [], //滿60分鐘
    mList3: [], //最后一小時的分鐘列表（不一定滿60分鐘）
    dList: [], //日期列表（最多有兩個）
    yList: [], //年/月列表（最多有兩個）
    yTime: 0, //已選年-月索引
    dTime: 0, //已選日期索引
    hTime: 0, //已選小時索引
    mTime: 0, //已選分鐘索引
    hList: [], //所有小時列表（24）
  },
  lifetimes: {
    attached: function () {
      // 在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行
      this.handleTime();
    },
  },
  /**
   * 組件的方法列表
   */
  methods: {
    // 處理時間
    handleTime() {
      this.getPastTime();
      this.handleTimeRegion();
    },
    // 切換處理
    bindChange({ detail }) {
      console.log(detail, 2222);
      const data = detail.value;
      // 索引
      let yTime = this.data.yTime;
      let dTime = this.data.dTime;
      let hTime = this.data.hTime;
      let mTime = 0;
      let minutes = this.data.minutes;
      let hours = this.data.hours;
      // 年/月切換
      // 只有跨月（跨年）才會有機(jī)會切換
      if (data[0] != this.data.yTime) {
        yTime = data[0];
        // 如跨月（跨年）第一個日期是上個月的，第二個日期是下個月的
        dTime = data[0];
        hTime = 0;
        mTime = 0;
        // 如果是第一天，小時列表為hList1，否則為hList2
        hours = dTime == 0 ? this.data.hList1 : this.data.hList2;
        minutes = dTime == 0 ? this.data.mList1 : this.data.mList3;
      }
      // 日期切換
      if (data[1] != this.data.dTime) {
        dTime = data[1];
        hTime = 0;
        mTime = 0;
        // 如果有跨月/年，年月和日要同步
        if (this.data.yList.length > 1) {
          yTime = data[1];
        }
        // 如果是第一天，小時列表為hList1，否則為hList2
        hours = data[1] == 0 ? this.data.hList1 : this.data.hList2;
        minutes = data[1] == 0 ? this.data.mList1 : this.data.mList3;
      }
      // 小時切換
      if (data[2] != this.data.hTime) {
        // 切換到第一天的第一個小時
        if (data[0] == 0 && data[1] == 0 && data[2] == 0) {
          minutes = this.data.mList1;
        } else if (
          data[0] == this.data.yList.length - 1 &&
          data[1] == 1 &&
          data[2] == this.data.hList2.length - 1
        ) {
          // 第二天的最后一個小時
          minutes = this.data.mList2;
        } else {
          // 中間小時
          minutes = this.data.mList3;
        }
        hTime = data[2];
        mTime = 0;
      }
      // 分鐘切換
      if (data[3] != this.data.mTime) {
        mTime = data[3];
      }
      this.setData({
        days: this.data.dList,
        hours,
        minutes,
        pickerTime: [yTime, dTime, hTime, mTime],
        yTime,
        dTime,
        hTime,
        mTime,
      });
      this.handleTimeRegion();
    },
    getPastTime() {
      // 獲取24小時之后的時間戳
      const nextTime = new Date().getTime() + 24 * 60 * 60 * 1000;
      // 一個小時之后的時間戳
      const currentTime = new Date().getTime() + 60 * 60 * 1000;
      // 處理年月
      this.getYM(currentTime, nextTime);
      // 處理日
      this.getDay(currentTime, nextTime);
      // 處理小時
      this.getHour(currentTime, nextTime);
      // 處理分鐘
      this.getMinute(currentTime, nextTime);
    },
    // 獲取年月列表
    getYM(currentTime, nextTime) {
      const yTime1 = this.timeFormat(currentTime, "getFullYear");
      const yTime2 = this.timeFormat(nextTime, "getFullYear");
      let mTime1 = this.timeFormat(currentTime, "getMonth");
      let mTime2 = this.timeFormat(nextTime, "getMonth");
      const resStr1 = yTime1 + "-" + mTime1;
      const resStr2 = yTime2 + "-" + mTime2;
      // 去重處理
      const yList = Array.from(new Set([resStr1, resStr2]));
      this.setData({
        years: yList,
        yList,
      });
      console.log("yList:", yList);
    },
    // 獲取日期
    getDay(currentTime, nextTime) {
      let dTime1 = this.timeFormat(currentTime, "getDate");
      let dTime2 = this.timeFormat(nextTime, "getDate");
      // 去重處理
      const dList = Array.from(new Set([dTime1, dTime2]));
      this.setData({
        dList,
        days: dList,
      });
      console.log("dList:", dList);
    },
    // 獲取小時列表，整點需要處理
    getHour(currentTime, nextTime) {
      let workTime = currentTime;
      let hList1 = [],
        hList2 = [],
        hList = [];
      // 第一天的日期
      const day1 = this.timeFormat(currentTime, "getDate");
      while (workTime <= nextTime) {
        let H = this.timeFormat(workTime, "getHours"); //獲取當(dāng)前小時數(shù)(0-23)
        // 第二天的日期
        const day2 = this.timeFormat(workTime, "getDate");
        if (day1 == day2) {
          hList1.push(H);
        } else {
          hList2.push(H);
        }
        hList.push(H);
        workTime = workTime + 3600000;
      }
      // 獲取分鐘
      let M = this.timeFormat(currentTime, "getMinutes"); //獲取當(dāng)前分鐘數(shù)(0-59)
      // 判斷如果是整點，就去掉最后一個小時
      if (M == "00") {
        hList2.splice(hList2.length - 1);
      }
      this.setData({
        hList1,
        hList2,
        hList,
        hours: hList1,
      });
      console.log("hList:", [hList1, hList2]);
    },
    // 獲取分鐘列表
    getMinute(currentTime, nextTime) {
      let workTime = currentTime;
      let mList1 = [],
        mList2 = [],
        mList3 = [];
      while (workTime <= nextTime) {
        // 獲取小時
        let H = this.timeFormat(workTime, "getHours"); //獲取當(dāng)前小時數(shù)(0-23)
        // 獲取分鐘
        let M = this.timeFormat(workTime, "getMinutes"); //獲取當(dāng)前分鐘數(shù)(0-59)
        if (H == this.data.hList[0]) {
          // 第一個小時
          mList1.push(M);
        } else if (
          H == this.data.hList[this.data.hList.length - 1] &&
          M != "00"
        ) {
          //最后一個小時（不是整點,不滿一個小時）
          mList2.push(M);
        } else if (
          H == this.data.hList[this.data.hList.length - 1] &&
          M == "00"
        ) {
          //最后一個小時（整點，滿一個小時）
          mList2.push(M);
        }
        workTime = workTime + 60000;
      }
      // 獲取滿一個小時的分鐘數(shù)
      for (let i = 0; i < 60; i++) {
        const M = i > 9 ? i : "0" + i;
        mList3.push(M);
      }
      this.setData({
        mList1,
        mList2,
        mList3,
        minutes: mList1,
      });
      console.log("mList:", [mList1, mList2, mList3]);
    },
    //時間生成并加0處理
    timeFormat(time, type) {
      let resTime = new Date(time)[type]();
      // 獲取月份的要+1
      resTime = type == "getMonth" ? resTime + 1 : resTime;
      // 小于10，前面加0
      resTime = resTime > 9 ? resTime : "0" + resTime;
      return resTime;
    },
    // 處理最后生成的pickerTime字符串
    handleTimeRegion() {
      const data = this.data.pickerTime;
      const y = this.data.years[data[0]];
      const d = this.data.days[data[1]];
      const h = this.data.hours[data[2]];
      const m = this.data.minutes[data[3]];
      const timeRegion = y + "-" + d + " " + h + ":" + m + ":" + "00";
      this.setData({
        timeRegion,
      });
    },
    // 取消
    onCancel() {
      const obj = {
        timeRegion: "",
        isPicker: false,
      };
      this.triggerEvent("onselect", obj);
    },
    // 確認(rèn)
    onChecking() {
      const obj = {
        timeRegion: this.data.timeRegion,
        isPicker: true,
      };
      this.triggerEvent("onselect", obj);
    },
  },
});

json文件

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

wxml文件

<!-- components/pickerTime/pickerTime.wxml -->
<!-- 選擇未來24小時之內(nèi)的時間點，打開默認(rèn)選當(dāng)前時間一個小時后的時間 -->
<view class="picker-body">
  <view class="show-time">選定的時間：{{timeRegion}}</view>
  <picker-view indicator-style="height: 40px;" style="width: 100%; height: 160px;" value="{{pickerTime}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" wx:key="item" style="line-height: 40px; text-align: center;">
        {{item}}
      </view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" wx:key="item" style="line-height: 40px; text-align: center;">
        {{item}}日
      </view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{hours}}" wx:key="item" style="line-height: 40px; text-align: center;">
        {{item}}時
      </view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{minutes}}" wx:key="item" style="line-height: 40px; text-align: center;">
        {{item}}分
      </view>
    </picker-view-column>
  </picker-view>
  <view class="btnBox">
    <button class='myBtn cancel' style="width: 40%;" bindtap="onCancel">取消</button>
    <button class='myBtn checking' style="width: 40%;" bindtap="onChecking">完 成</button>
  </view>
</view>

wxss文件

/* components/pickerTime/pickerTime.wxss */
.btnBox {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  margin-top: 20rpx;
}
.myBtn {
  color: #fff;
  font-weight: normal;
  border-radius: 50rpx;
  margin: 0;
}
.cancel {
  background-color: #fff;
  color: #444;
  border: 2rpx solid #a5a3a3;
}
.checking {
  background-color: #3f74ee;
}
.picker-body {
  width: 100%;
  height: 400rpx;
  position: fixed;
  bottom: 300rpx;
  background-color: #fff;
  border-top: 2rpx solid #999;
  z-index: 999;
}
.show-time {
  width: 100%;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  color: #333;
}

頁面引用文章來源地址http://www.zghlxwxcb.cn/news/detail-765328.html

//json
{
  "usingComponents": {
    "pickerTime":"../../../components/pickerTime/pickerTime"

  },
}
//wxml
<!-- 選擇時間 -->
<pickerTime bind:onselect="onselect" wx:if="{{openPicker}}" />
//js
data: {
    openPicker: true,//打開組件
    timeRegion:'',//選定的時間字符串
  },
  // 確認(rèn)時間
  onselect({ detail }) {
    this.setData({
      timeRegion: detail.timeRegion || this.data.timeRegion,
      openPicker: false,
    });
  },

到了這里，關(guān)于微信小程序原生寫法——24小時時間選擇器組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！