微信小程序日期时分组件(年月日时分)

2022-07-21,,,,

本文实例为大家分享了微信小程序日期时分组件的具体代码,供大家参考,具体内容如下

如图所示效果

第一步新建picker组件文件

1,pickertime.js组件代码内容

// component/pickertime/pickertime.js
component({
  /**
   * 组件的属性列表
   */
  properties: {
    date: {            // 属性名
      type: null,     // 类型(必填),目前接受的类型包括:string, number, boolean, object, array, null(表示任意类型)
      value: null     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    startdate: {
      type: null,     // 类型(必填),目前接受的类型包括:string, number, boolean, object, array, null(表示任意类型)
      value: null     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    enddate: {
      type: null,     // 类型(必填),目前接受的类型包括:string, number, boolean, object, array, null(表示任意类型)
      value: null     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    disabled: {
      type: null,     // 类型(必填),目前接受的类型包括:string, number, boolean, object, array, null(表示任意类型)
      value: false     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    placeholder: {
      type: null,     // 类型(必填),目前接受的类型包括:string, number, boolean, object, array, 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, startdate, 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, startdate, 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, startdate, 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, startdate, stopdate) {
      let data = {
        year: [],
        month: [],
        day: [],
        time: [],
        division: [],
        index:[0,0,0,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: "0" + i + "分" });
                        } else {
                          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: "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: "0" + i + "分" });
                        } else {
                          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: "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: "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: "0" + i + "分" });
                      } else {
                        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: "0" + i + "时" });
                    } else {
                      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: "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: "0" + i + "分" });
                      } else {
                        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: "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 {
              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: "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: "0" + i + "分" });
                    } else {
                      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: "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 (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: "0" + i + "时" });
                  } else {
                    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: "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: "0" + i + "分" });
                    } else {
                      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: "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 {
              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: "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: "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: "0" + i + "分" });
                  } else {
                    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: "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 {
            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: "0" + i + "时" });
                } else {
                  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: "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: "0" + i + "分" });
                  } else {
                    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: "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 {
            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 = 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({ 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;
        }
      }
      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, month, 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
    })
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

《微信小程序日期时分组件(年月日时分).doc》

下载本文的Word格式文档,以方便收藏与打印。