微信小程序年月日时分秒选择器

47 篇文章 0 订阅
42 篇文章 0 订阅

1.首先创建一个pickerYMDHM控件

pickerYMDHM.js

// components/pickerYMDHM/pickerYMDHM.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();
    }
  }
})

pickerYMDHM.json

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

pickerYMDHM.wxml

 <picker disabled="{{disabled}}" mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange" bindcancel ="pickerCancel" value="{{pickerIndex}}" range="{{pickerArray}}" range-key="{{'name'}}">
      <view style='font-size:.7rem;background-color: #F8F8FF;line-height: 40px;padding:0px 10px;width:150px;text-align:center'>
           {{placeholder}}
      </view>
 </picker>

pickerYMDHM.wxss

.showFont{
  font-size: 28rpx;
  width:490rpx;
  height:110rpx;
  line-height:110rpx!important;
}

index页面

index.js

data: {
    placeholder:'请选择时间',
    endedTime: '2019-01-01 12:38',
    date:''
  }
/**
 * 日历控件绑定函数 
 * 点击日期返回
 */
onPickerChange: function (e) {
  console.log(e.detail);
  this.setData({
    date: e.detail.dateString
  })
}

index.json

{
  "usingComponents": {
    "pickerYMDHM": "/components/pickerYMDHM/pickerYMDHM"
  },
  "navigationBarTitleText": "详情"
}

index.wxml

<view class="">
    <pickerYMDHM placeholder = "{{placeholder}}" date = "{{date}}" disabled = "{{disabled}}" bind:onPickerChange="onPickerChange" startDate="{{startDate}}" endDate="{{endDate}}">
    </pickerYMDHM>
</view>   

如果你觉得有用的话记得点赞收藏哦~

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 微信小程序中的Picker组件可以实现选择年月日时分秒的功能。 首先,我们需要在小程序的页面中引入Picker组件,并在wxml文件中定义一个Picker组件的容器,例如: ```html <view class="picker-container"> <picker mode="date" bindchange="onDateChange"> <view class="picker-content">{{selectedDate}}</view> </picker> </view> ``` 上述代码中,使用`picker`标签定义了一个Picker组件,设置`mode`属性为`date`表示选择日期。`bindchange`属性绑定了一个事件处理函数`onDateChange`,用于在选择日期时触发相应的操作。`picker`标签内的`view`标签可以用来显示选择的日期。 接下来,在小程序的页面对应的js文件中,我们需要定义`onDateChange`事件处理函数,并在函数中处理年月日时分秒的选择。例如: ```javascript Page({ data: { selectedDate: '' }, onDateChange(e) { const value = e.detail.value; this.setData({ selectedDate: value }); // 在这里可以继续添加代码处理选中的年月日时分秒 } }); ``` 上述代码中,`onDateChange`事件处理函数获取了选择的日期信息,将其保存在`selectedDate`数据中,然后可以在函数体内继续添加代码,处理选中的年月日时分秒。 总结起来,通过Picker组件的引入和事件处理函数的编写,我们可以在微信小程序中实现年月日时分秒的选择功能。 ### 回答2: 微信小程序picker组件是一种方便用户选择日期和时间的工具。其中,年月日时分秒picker所支持的不同选择项。 在微信小程序中使用picker组件,我们可以设置mode属性来定义选择器的模式。为了选择年月日时分秒,我们可以将mode属性设置为"datetime"。 在picker的使用过程中,我们可以通过设置start和end属性来限制可选择的日期和时间范围。例如,我们可以设置start为当前日期时间,end为未来某个日期时间,以确保用户只能选择当前时间以后的日期和时间。 通过以上设置,当用户点击picker组件时,会弹出一个滚动选择器,分为年、月、日、时、分和秒六个滚动列表。用户可以通过滑动这些列表来选择所需的日期和时间。 选择器的每个滚动列表默认都有一个固定的范围,比如年份范围通常为当前年份加减10年。用户可以通过滚动列表来选择他们想要的年、月、日、时、分和秒。 当用户完成选择后,我们可以通过绑定picker的change事件来获取用户所选的日期和时间。在change事件的回调函数中,我们可以通过event.detail.value来获取用户选择的日期和时间值。 综上所述,微信小程序picker组件可以方便地实现年月日时分秒的选择功能。通过设置适当的属性和监听change事件,我们可以根据用户的选择来进行相应的操作。无论是用于预约、倒计时或者其他时间相关的功能,picker组件都能够满足用户的需求。 ### 回答3: 微信小程序中的picker组件可以用来选择年月日时分秒。在使用picker组件时,我们可以通过设置mode属性为'date'来选择年月日,设置为'time'来选择时分秒,还可以设置为'dateTime'来选择年月日时分秒。 当设置mode属性为'date'时,picker会显示一个日期选择器,我们可以通过设置start和end属性来限制可以选择的日期范围。例如,设置start为'2010-01-01',end为'2022-12-31',用户只能在这个日期范围内进行选择。选择的日期将会以字符串的形式返回。 当设置mode属性为'time'时,picker会显示一个时间选择器,可以选择时分秒。同样,我们可以通过设置start和end属性来限制可选择的时间范围。选择的时间将会以字符串的形式返回。 当设置mode属性为'dateTime'时,picker会显示一个日期时间选择器,可以选择年月日时分秒。同样,我们可以通过设置start和end属性来限制可选择的日期时间范围。选择的日期时间将会以字符串的形式返回。 在使用picker时,可以通过bindchange属性来监听用户选择的值的变化,从而执行相应的代码逻辑。例如,当选择器的值发生变化时,可以将选择的值存储在数据中,并更新页面的展示内容。 总之,微信小程序picker组件提供了便捷的年月日时分秒选择功能,在开发时可以根据实际需求设置mode属性,并通过监听用户选择的值的变化来处理相应的业务逻辑。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值