本文例項為大家分享了微信小程式日期時分元件的具體程式碼，供大家參考，具體內容如下

如圖所示效果

第一步新建picker元件檔案

1,pickerTime.元件程式碼內容

// component/pickerTime/pickerTime.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    date: {            // 屬性名
      type: null,// 型別（必填），目前接受的型別包括：String,Number,Boolean,Object,Array,null（表示任意型別）
      value: null     // 屬性初始值（可選），如果未指定則會根據型別選擇一個
    },startDate: {
      type: null,endDate: {
      type: null,disabled: {
      type: null,null（表示任意型別）
      value: false     // 屬性初始值（可選），如果未指定則會根據型別選擇一個
    },placeholder: {
      type: null,null（表示任意型別）
      value: null     // 屬性初始值（可選），如果未指定則會根據型別選擇一個
    }
  },/**
   * 元件的初始資料
   */
  data: {
    pickerArray: [],//日期控制元件資料list
    pickerIndex: [],//日期控制元件選擇的index
    chooseIndex: [],//日期控制元件確認選擇的index
    chooseArray: [],//日期控制元件確認選擇後的list
    stDate: '',//開始日期
    enDate: ''//結束日期
  },/**
   * 元件的方法列表
   */
  methods: {
    _onInit() {
      let date = new Date();
      if (this.data.date != null) {
        let str = this.data.date;
        str = str.replace(/-/g,"/");
        date = new Date(str);
      }
      let pickerArray = this.data.pickerArray;
      // console.log(date.getFullYear());
      //預設選擇3年內
      let year = [];
      let month = [];
      let day = [];
      let time = [];
      let division = [];
      let startDate = '';
      let endDate = ''
      let tpData = {};
      if (this.data.startDate != null && this.data.endDate == null) {
        //如果存在開始時間，則預設設定結束時間為2099
        startDate = this._getDefaultDate(this.data.startDate);
        endDate = this._getDefaultDate("2099-12-31 23:59");
        tpData = this._getModify(date,startDate,endDate);
      }
      if (this.data.endDate != null && this.data.startDate == null) {
        //如果存在結束時間，不存在開始時間 則預設設定開始時間為1900
        startDate = this._getDefaultDate("1900-01-01 00:00");
        endDate = this._getDefaultDate(this.data.endDate);
        tpData = this._getModify(date,endDate);
      }
      if (this.data.endDate != null && this.data.startDate != null) {
        startDate = this._getDefaultDate(this.data.startDate);
        endDate = this._getDefaultDate(this.data.endDate);
        tpData = this._getModify(date,endDate);
      }
      // console.log(year);
      if (this.data.startDate == null && this.data.endDate == null) {
        startDate = this._getDefaultDate("1901-01-01 00:00");
        endDate = this._getDefaultDate("2099-12-31 23:59");
        tpData = this._getModify(date,endDate);
      }
      
      if (date > endDate || date < startDate) {
        this.setData({
          placeholder: "預設日期不在時間範圍內"
        })
        return;
      }
      // console.log(division);
      pickerArray[0] = tpData.year;
      pickerArray[1] = tpData.month;
      pickerArray[2] = tpData.day;
      pickerArray[3] = tpData.time;
      pickerArray[4] = tpData.division;
      let mdate = {
        date: date,year: date.getFullYear() + '',month: date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '',day: date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '',time: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + '',division: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ''
      }
      mdate.placeholder = mdate.year + '-' + mdate.month + '-' + mdate.day + ' ' + mdate.time + ':' + mdate.division;
      this.setData({
        pickerArray,pickerIndex: tpData.index,chooseIndex: tpData.index,chooseArray: pickerArray,placeholder: this.data.placeholder != null ? this.data.placeholder : mdate.placeholder,stDate: startDate,enDate: endDate
      })
      // console.log(date);
      //設定placeholder屬性後 初始化不返回日期
      if (this.data.placeholder == null){
        this.triggerEvent('onPickerChange',mdate);
      }
      // console.log(this.data.pickerArray);
      // console.log(this._getNumOfDays(2018,10));
    },/**
     * 
     */
    _getDefaultDate(date) {
      date = date.replace(/-/g,"/");
      return new Date(date);
    },/**
  * 
  * 獲取開始日期 結束日期 中間日期
  * @param {date} newDate 預設日期
  * @param {date} startDate 設定開始日期
  * @param {date} stopDate 設定結束日期
  * @returns data 包含年月日時分陣列
  */
    _getModify(newDate,stopDate) {
      let data = {
        year: [],month: [],day: [],time: [],division: [],index:[0,0]
      }
      let nYear = newDate.getFullYear();
      let nMonth = newDate.getMonth() + 1;
      let nDay = newDate.getDate();
      let nHours = newDate.getHours();
      let nMinutes = newDate.getMinutes();
 
      let tYear = startDate.getFullYear();
      let tMonth = startDate.getMonth() + 1;
      let tDay = startDate.getDate();
      let tHours = startDate.getHours();
      let tMinutes = startDate.getMinutes();
 
      let pYear = stopDate.getFullYear();
      let pMonth = stopDate.getMonth() + 1;
      let pDay = stopDate.getDate();
      let pHours = stopDate.getHours();
      let pMinutes = stopDate.getMinutes();
      for (let i = tYear; i <= pYear; i++) {
        data.year.push({ id: i,name: i + "年" });
      }
      data.index[0] = nYear - tYear;
      //判斷年份是否相同 相同則繼續
      if (nYear == tYear){
        //判斷結束年份 賦值月份 如果結束年份相同則把結束月份 一併賦值
        if (nYear == pYear){
          for (let i = tMonth; i <= pMonth; i++) {
            data.month.push({ id: i,name: i + "月" });
          }
          data.index[1] = nMonth - tMonth < 0 ? 0 : nMonth - tMonth;
 
          if (nMonth == tMonth){
            if (nMonth == pMonth){
              for (let i = tDay; i <= pDay; i++) {
                data.day.push({ id: i,name: i + "日" });
              }
              data.index[2] = nDay - tDay < 0 ? 0 : nDay - tDay;
 
              if (nDay == tDay){
                if (nDay == pDay){
                  for (let i = tHours; i <= pHours; i++) {
                    if (i < 10) {
                      data.time.push({ id: i,name: "0" + i + "時" });
                    } else {
                      data.time.push({ id: i,name: i + "時" });
                    }
                  }
                  
                  data.index[3] = nHours - tHours < 0 ? 0 : nHours - tHours;
 
                  if (nHours == tHours){
                    if (nHours == pHours){
                      for (let i = tMinutes; i <= pMinutes; i++) {
                        if (i < 10) {
                          data.division.push({ id: i,name: "0" + i + "分" });
                        } else {
                          data.division.push({ id: i,name: i + "分" });
                        }
                      }
                      data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
                    } else {
                      for (let i = tMinutes; i <= 59; i++) {
                        if (i < 10) {
                          data.division.push({ id: i,name: i + "分" });
                        }
                      }
                      data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
                    }
                  } else {
                    if (nHours == pHours){
                      for (let i = 0; i <= pMinutes; i++) {
                        if (i < 10) {
                          data.division.push({ id: i,name: i + "分" });
                        }
                      }
                      data.index[4] = nMinutes;
                    } else {
                      for (let i = 0; i <= 59; i++) {
                        if (i < 10) {
                          data.division.push({ id: i,name: i + "分" });
                        }
                      }
                      data.index[4] = nMinutes;
                    }
                  }
                } else {
                  for (let i = tHours; i <= 23; i++) {
                    if (i < 10) {
                      data.time.push({ id: i,name: i + "時" });
                    }
                  }
                  
                  data.index[3] = nHours - tHours < 0 ? 0 : nHours - tHours;
                  if (nHours == tHours) {
                    for (let i = tMinutes; i <= 59; i++) {
                      if (i < 10) {
                        data.division.push({ id: i,name: "0" + i + "分" });
                      } else {
                        data.division.push({ id: i,name: i + "分" });
                      }
                    }
                    data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
                  } else {
                    for (let i = 0; i <= 59; i++) {
                      if (i < 10) {
                        data.division.push({ id: i,name: i + "分" });
                      }
                    }
                    data.index[4] = nMinutes;
                  }
                }
              } else {
                if (nDay == pDay){
                  for (let i = 0; i <= pHours; i++) {
                    if (i < 10) {
                      data.time.push({ id: i,name: i + "時" });
                    }
                  }
                  data.index[3] = nHours;
                  if (nHours == pHours){
                    for (let i = 0; i <= pMinutes; i++) {
                      if (i < 10) {
                        data.division.push({ id: i,n
 
ame: "0" + i + "分" });
                      } else {
                        data.division.push({ id: i,name: i + "分" });
                      }
                    }
                    data.index[4] = nMinutes;
                  } else {
                    for (let i = 0; i <= 59; i++) {
                      if (i < 10) {
                        data.division.push({ id: i,name: i + "分" });
                      }
                    }
                    data.index[4] = nMinutes;
                  }
                } else {
                  for (let i = 0; i <= 23; i++) {
                    if (i < 10) {
                      data.time.push({ id: i,name: i + "時" });
                    }
                  }
 
                  data.index[3] = nHours;
                  // console.log(time);
                  for (let i = 0; i <= 59; i++) {
                    if (i < 10) {
                      data.division.push({ id: i,name: "0" + i + "分" });
                    } else {
                      data.division.push({ id: i,name: i + "分" });
                    }
                  }
                  data.index[4] = nMinutes;
                }
              }
            } else {
              let dayNum = this._getNumOfDays(nYear,nMonth);
              for (let i = tDay; i <= dayNum; i++) {
                data.day.push({ id: i,name: i + "日" });
              }
              data.index[2] = nDay - tDay < 0 ? 0 : nDay - tDay;
              if (nDay == tDay) {
                for (let i = tHours; i <= 23; i++) {
                  if (i < 10) {
                    data.time.push({ id: i,name: "0" + i + "時" });
                  } else {
                    data.time.push({ id: i,name: i + "時" });
                  }
                }
                
                data.index[3] = nHours - tHours < 0 ? 0 : nHours - tHours;
                if (nHours == tHours) {
                  for (let i = tMinutes; i <= 59; i++) {
                    if (i < 10) {
                      data.division.push({ id: i,name: i + "分" });
                    }
                  }
                  data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
                } else {
                  for (let i = 0; i <= 59; i++) {
                    if (i < 10) {
                      data.division.push({ id: i,name: i + "分" });
                    }
                  }
                  data.index[4] = nMinutes;
                }
              } else {
                for (let i = 0; i <= 23; i++) {
                  if (i < 10) {
                    data.time.push({ id: i,name: i + "時" });
                  }
                }
                
                data.index[3] = nHours;
                // console.log(time);
                for (let i = 0; i <= 59; i++) {
                  if (i < 10) {
                    data.division.push({ id: i,name: "0" + i + "分" });
                  } else {
                    data.division.push({ id: i,name: i + "分" });
                  }
                }
                data.index[4] = nMinutes;
              }
            }
          } else {
            if (nMonth == pMonth){
              for (let i = 1; i <= pDay; i++) {
                data.day.push({ id: i,name: i + "日" });
              }
              data.index[2] = nDay - 1;
              if (nDay == pDay){
                for (let i = 0; i <= pHours; i++) {
                  if (i < 10) {
                    data.time.push({ id: i,name: i + "時" });
                  }
                }
                data.index[3] = nHours;
                if (nHours == pHours){
                  for (let i = 0; i <= pMinutes; i++) {
                    if (i < 10) {
                      data.division.push({ id: i,name: i + "分" });
                    }
                  }
                  data.index[4] = nMinutes;
                } else {
                  for (let i = 0; i <= 59; i++) {
                    if (i < 10) {
                      data.division.push({ id: i,name: "0" + i + "時" gPAqUki
 
});
                  } else {
                    data.time.push({ id: i,name: i + "時" });
                  }
                }
                data.index[3] = nHours;
                // console.log(time);
                for (let i = 0; i <= 59; i++) {
                  if (i < 10) {
                    data.division.push({ id: i,name: i + "分" });
                  }
                }
                data.index[4] = nMinutes;
              }
            } else {
              let dayNum = this._getNumOfDays(nYear,nMonth);
              for (let i = 1; i <= dayNum; i++) {
                data.day.push({ id: i,name: i + "日" });
              }
              data.index[2] = nDay - 1;
              for (let i = 0; i <= 23; i++) {
                if (i < 10) {
                  data.time.push({ id: i,name: "0" + i + "時" });
                } else {
                  data.time.push({ id: i,name: i + "時" });
                }
              }
 
              data.index[3] = nHours;
              // console.log(time);
              for (let i = 0; i <= 59; i++) {
                if (i < 10) {
                  data.division.push({ id: i,name: "0" + i + "分" });
                } else {
                  data.division.push({ id: i,name: i + "分" });
                }
              }
              data.index[4] = nMinutes;
            }
          } 
        } else {//只需要開始日期 因為結束年份不同 所以不會用到結束日期
          for (let i = tMonth; i <= 12; i++) {
            data.month.push({ id: i,name: i + "月" });
          }
          data.index[1] = nMonth - tMonth < 0 ? 0 : nMonth - tMonth;
          if (nMonth == tMonth){
            let dayNum = this._getNumOfDays(nYear,nMonth);
            for (let i = tDay; i <= dayNum; i++) {
             data.day.push({ id: i,name: i + "日" });
            }
            data.index[2] = nDay - tDay < 0 ? 0 : nDay - tDay;
            if (nDay == tDay){
              for (let i = tHours; i <= 23; i++) {
                if (i < 10) {
                  data.time.push({ id: i,name: i + "時" });
                }
              }
              
              data.index[3] = nHours - tHours < 0 ? 0 : nHours - tHours;
              if (nHours == tHours){
                for (let i = tMinutes; i <= 59; i++) {
                  if (i < 10) {
                    data.division.push({ id: i,name: i + "分" });
                  }
                }
                data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
              } else {
                for (let i = 0; i <= 59; i++) {
                  if (i < 10) {
                    data.division.push({ id: i,name: i + "分" });
                  }
                }
                data.index[4] = nMinutes;
              }
            } else {
              for (let i = 0; i <= 23; i++) {
                if (i < 10) {
                  data.time.push({ id: i,name: i + "時" });
                }
              }
              
              data.index[3] = nHours;
              // console.log(time);
              for (let i = 0; i <= 59; i++) {
                if (i < 10) {
                  data.division.push({ id: i,name:
 
 "0" + i + "分" });
                } else {
                  data.division.push({ id: i,name: i + "分" });
                }
              }
              data.index[4] = nMinutes;
            }
          } else {
            let dayNum = this._getNumOfDays(nYear,nMonth);
            for (let i = 1; i <= dayNum; i++) {
              data.day.push({ id: i,name: i + "日" });
            }
            data.index[2] = nDay - 1;
            for (let i = 0; i <= 23; i++) {
              if (i < 10) {
                data.time.push({ id: i,name: "0" + i + "時" });
              } else {
                data.time.push({ id: i,name: i + "時" });
              }
            }
            
            data.index[3] = nHours;
            // console.log(time);
            for (let i = 0; i <= 59; i++) {
              if (i < 10) {
                data.division.push({ id: i,name: "0" + i + "分" });
              } else {
                data.division.push({ id: i,name: i + "分" });
              }
            }
            data.index[4] = nMinutes;
          }
        }        
      } else {
        if (nYear == pYear) {
          for (let i = 1; i <= pMonth; i++) {
            data.month.push({ id: i,name: i + "月" });
          }
          data.index[1] = nMonth - 1;
          if (nMonth == pMonth){
            for (let i = 1; i <= pDay; i++) {
              data.day.push({ id: i,name: i + "日" });
            }
            data.index[2] = nDay - 1;
            if (nDay == pDay){
              for (let i = 0; i <= pHours; i++) {
                if (i < 10) {
                  data.time.push({ id: i,name: i + "時" });
                }
              }
              data.index[3] = nHours;
              if (nHours == pHours){
                for (let i = 0; i <= pMinutes; i++) {
                  if (i < 10) {
                    data.division.push({ id: i,name: i + "分" });
                  }
                }
                data.index[4] = nMinutes;
              } else {
                for (let i = 0; i <= 59; i++) {
                  if (i < 10) {
                    data.division.push({ id: i,name: i + "時" });
                }
              }
            
              data.index[3] = nHours;
              // console.log(time);
              for (let i = 0; i <= 59; i++) {
                if (i < 10) {
                  data.division.push({ id: i,name: i + "時" });
              }
            }
          
            data.index[3] = nHours;
            // console.log(time);
            for (let i = 0; i <= 59; i++) {
              if (i < 10) {
                data.division.push({ id: i,name: i + "分" });
              }
            }
            data.index[4] = nMinutes;
          }
        } else {
          for (let i = 1; i <= 12; i++) {
            data.month.push({ id: i,name: i + "月" });
          }
          data.index[1] = nMonth - 1;
          let dayNum = this._getNumOfDays(nYear,nMonth);
          for (let i = 1; i <= dayNum; i++) {
            data.day.push({ id: i,name: i + "日" });
          }
          data.index[2] = nDay - 1;
          for (let i = 0; i <= 23; i++) {
            if (i < 10) {
              data.time.push({ www.cppcns.comid: i,name: "0" + i + "時" });
            } else {
              data.time.push({ id: i,name: i + "時" });
            }
          }
          
          data.index[3] = nHours;
          // console.log(time);
          for (let i = 0; i <= 59; i++) {
            if (i < 10) {
              data.division.push({ id: i,name: "0" + i + "分" });
            } else {
              data.division.push({ id: i,name: i + "分" });
            }
          }
          data.index[4] = nMinutes;
        }
      }
      return data
    },/**
  * 
  * 獲取本月天數
  * @param {number} year 
  * @param {number} month 
  * @param {number} [day=0] 0為本月0最後一天的
  * @returns number 1-31
  */
    _getNumOfDays(year,month,day = 0) {
      return new Date(year,day).getDate()
    },pickerChange: function (e) {
      // console.log('picker傳送選擇改變，攜帶值為',e.detail.value)
      let indexArr = e.detail.value;
      const year = this.data.pickerArray[0][indexArr[0]].id;
      const month = this.data.pickerArray[1][indexArr[1]].id;
      const day = this.data.pickerArray[2][indexArr[2]].id;
      const time = this.data.pickerArray[3][indexArr[3]].id;
      const division = this.data.pickerArray[4][indexArr[4]].id;
      let date = {
        date: new Date(year + '-' + month + '-' + day + ' ' + time + ':' + division),year: year + '',month: month < 10 ? '0' + month : month + '',day: day < 10 ? '0' + day : day + '',time: time < 10 ? '0' + time : time + '',division: division < 10 ? '0' + division : division + ''
      }
      date.dateString = date.year + '-' + date.month + '-' + date.day + ' ' + date.time + ':' + date.division;
      // console.log(date);
      this.setData({
        chooseIndex: e.detail.value,chooseArray: this.data.pickerArray,placeholder: date.dateString
      })
      this.triggerEvent('onPickerChange',date);
    },pickerColumnChange: function (e) {
      // console.log('修改的列為',e.detail.column,'，值為',e.detail.value);
      let data = {
        pickerArray: this.data.pickerArray,pickerIndex: this.data.pickerIndex
      };
      //首先獲取 修改後的日期 然後重新賦值列表資料
      data.pickerIndex[e.detail.column] = e.detail.value;
      let cYear = data.pickerArray[0][data.pickerIndex[0]].id;
      let cMonth = data.pickerArray[1][data.pickerIndex[1]].id;
      let cDay = data.pickerArray[2][data.pickerIndex[2]].id;
      let cTime = data.pickerArray[3][data.pickerIndex[3]].id;
      let cDivision = data.pickerArray[4][data.pickerIndex[4]].id;
      /客棧/需要先判斷修改後的日期是否是正確的天數 不正確會導致日期錯亂等未知情況
      let daysn = this._getNumOfDays(cYear,cMonth);
      //不正確 重新賦值
      if (cDay > daysn){
        cDay = daysn;
      }
      
      // console.log(cYear + '-' + cMonth + '-' + cDay + ' ' + cTime + ':' + cDivision);
      let newDate = this._getDefaultDate(cYear + '-' + cMonth + '-' + cDay + ' ' + cTime + ':' + cDivision);
      //判斷修改後的日期是否在限制範圍內 不在則重新賦值
      if (newDate > this.data.enDate) {
        newDate = this.data.enDate;
      }
      if (newDate < this.data.stDate){
        newDate = this.data.stDate;
      }
      let tpData = this._getModify(newDate,this.data.stDate,this.data.enDate);
      data.pickerArray[0] = tpData.year;
      data.pickerArray[1] = tpData.month;
      data.pickerArray[2] = tpData.day;
      data.pickerArray[3] = tpData.time;
      data.pickerArray[4] = tpData.division;
      data.pickerIndex = tpData.index;
      
      for (let i = 0; i <=4; i++) {
        if (data.pickerArray[i].length - 1 < data.pickerIndex[i]) {
          data.pickerIndex[i] = data.pickerArray[i].length - 1;
        }
      }
      this.setData(data);
    },pickerCancel: function (e) {
      // console.log("取消");
      this.setData({
        pickerIndex: this.data.chooseIndex,pickerArray: this.data.chooseArray
      })
    },},// 以下是舊式的定義方式，可以保持對 <2.2.3 版本基礎庫的相容
  attached() {
    // 在元件例項進入頁面節點樹時執行
    // 在元件例項進入頁面節點樹時執行
    // this._onInit();
  },ready() {
    // console.log('進入ready外層節點=',this.data.date);
    this._onInit();
  },// 以下為新方法 >=2.2.3
  lifetimes: {
    attached() {
      // 在元件例項進入頁面節點樹時執行
      // this._onInit();
    },detached() {
      // 在元件例項被從頁面節點樹移除時執行
    },ready() {
      // console.log('進入ready節點=',this.data.date);
      this._onInit();
    }
  }
})

2.pickerTime.wxml內容

<!--component/pickerTime/pickerTime.wxml-->
<view>
  <picker disabled="{{disabled}}" mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange" bindcancel ="pickerCancel" value="{{pickerIndex}}" range="{{pickerArray}}" range-key="{{'name'}}">
    <view>
      {{placeholder}}
    </view>
  </picker>
</view>

在頁面中使用

1,demo.json中引入元件

{
  "navigationBarTitleText": "demo","usingComponents": {
    "pickerTime": "/components/pickerTime/pickerTime"
  }
}

2,頁面中使用 wxml

<pickerTime placeholder="{{placeholder}}" date="{{date}}" bind:onPickerChange="onPickerChange"
startDate="{{startDate}}" endDate="{{endDate}}">
</pickerTime>

3.demo.js

data:{
 date: '2019-01-01 13:37',startDate: '2019-01-01 12:37',endDate: '2029-03-12 12:38',placeholder: '請選擇時間'
 },onPickerChange: function (e) {
  this.setData({
    date: e.detail.dateString  //選中的資料
  })
 },toDouble: function (num) {
  if (num >= 10) {//大於10
    return num;
  } else {//0-9
    return '0' + num
  }
  },getToday: function () {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  return year + '-' + this.toDouble(month) + '-' + this.toDouble(day)
  },//監聽頁面載入
  onLoad: function (options) {
    let dayTime= this.getToday();
    let dayHour = "18:00";
    let endedTime1 = dayTime + " " + dayHour;
    this.setData({
      date: endedTime1
    })
  },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。