iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >微信小程序如何实现日期时分组件
  • 286
分享到

微信小程序如何实现日期时分组件

2023-06-25 11:06:46 286人浏览 泡泡鱼
摘要

这篇文章主要介绍了微信小程序如何实现日期时分组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如图所示效果第一步新建picker组件文件1,pickerTime.js组件代码

这篇文章主要介绍了微信小程序如何实现日期时分组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

如图所示效果

微信小程序如何实现日期时分组件

第一步新建picker组件文件

1,pickerTime.js组件代码内容

// component/pickerTime/pickerTime.jsComponent({    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);    },        _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    },        _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();    }  }})

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>

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    })  },

感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序如何实现日期时分组件”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!

--结束END--

本文标题: 微信小程序如何实现日期时分组件

本文链接: https://www.lsjlt.com/news/304209.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序如何实现日期时分组件
    这篇文章主要介绍了微信小程序如何实现日期时分组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如图所示效果第一步新建picker组件文件1,pickerTime.js组件代码...
    99+
    2023-06-25
  • 微信小程序日期时分组件(年月日时分)
    本文实例为大家分享了微信小程序日期时分组件的具体代码,供大家参考,具体内容如下 如图所示效果 第一步新建picker组件文件 1,pickerTime.js组件代码内容 // ...
    99+
    2024-04-02
  • 微信小程序实现日期时间筛选器
    开发微信小程序过程中,有个需求需要用到日期时间筛选器,查看微信官方文档后,发现官方文档的picker筛选器只能单独支持日期或者是时间,所以为了实现需求自己参考企业微信封装了个日期时间...
    99+
    2024-04-02
  • 微信小程序如何实现日期范围选择
    本篇内容介绍了“微信小程序如何实现日期范围选择”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!样式如下:分别点击开始日期和结束日期选择时间(底...
    99+
    2023-07-02
  • 微信小程序如何实现switch组件
    小编给大家分享一下微信小程序如何实现switch组件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实现效果图:开关选择器属性名类...
    99+
    2024-04-02
  • 微信小程序如何实现textarea组件
    这篇文章将为大家详细讲解有关微信小程序如何实现textarea组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。多行输入框。属性名类型默认值说明valueString&n...
    99+
    2024-04-02
  • 微信小程序如何实现swiper组件
    这篇文章主要为大家展示了“微信小程序如何实现swiper组件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何实现swiper组件”这篇文章吧。swi...
    99+
    2024-04-02
  • 微信小程序实现日期格式化
    最近做了一个微信小程序的项目,关于后端给我传递日期的时候,我拿到的是一串数字如:createDate: 1552117531000 ,这是一个列的创建时间,现在却变成了一串数字,这是...
    99+
    2024-04-02
  • 微信小程序实现根据日期和时间排序功能
    最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助。 需求分析(这是已...
    99+
    2024-04-02
  • 微信小程序实现日期范围选择
    本文实例为大家分享了微信小程序实现日期范围选择的具体代码,供大家参考,具体内容如下 样式如下: 分别点击开始日期和结束日期选择时间(底部弹框): date.wxml:  <...
    99+
    2024-04-02
  • 微信小程序wxs日期时间处理的实现示例
    目录1、时间戳转日期2、UTC转北京时间WXS(WeiXin Script)是小程序的一套脚本语言,wxs 与 javascript 是不同的语言,有自己的语法,并不和 javasc...
    99+
    2024-04-02
  • 微信小程序如何实现YDUI的ScrollTab组件
    这篇文章将为大家详细讲解有关微信小程序如何实现YDUI的ScrollTab组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。WXML<!--导航 --&g...
    99+
    2024-04-02
  • 微信小程序如何实现倒计时
    这篇文章主要介绍“微信小程序如何实现倒计时”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序如何实现倒计时”文章能帮助大家解决问题。直接上代码吧<view class=&quo...
    99+
    2023-06-30
  • 微信小程序如何实现动画弹窗组件
    这篇文章主要介绍了微信小程序如何实现动画弹窗组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。基本效果如下:具体实现如下:第一步:新建一个 ...
    99+
    2024-04-02
  • 微信小程序如何实现时间轴
    这篇文章主要介绍了微信小程序如何实现时间轴的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序如何实现时间轴文章都会有所收获,下面我们一起来看看吧。一、显示样式二、代码 wxml:<view...
    99+
    2023-06-30
  • 在微信小程序使用picker实现日期选择
    微信小程序开发项目中,或多或少要使用时间选择器picker实现日期选择。选择开始日期和结束日期 而且选择开始时间后,选择结束时间,能够选择的日期不能比开始日期还要早。要实现以上效果可这样写: 在wxml中写 ...
    99+
    2023-08-25
    微信小程序 小程序 前端
  • 微信小程序日期选择器如何使用
    本文小编为大家详细介绍“微信小程序日期选择器如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序日期选择器如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。需求:在小程序开发中,时常会遇到日期选...
    99+
    2023-07-02
  • 小程序日期(日历)时间 选择器组件
    封装一个小程序日期(日历)时间 选择器组件 简要说明: 一共两个版本 ,date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层...
    99+
    2023-09-01
    小程序 javascript ui
  • 微信小程序日历插件怎么实现
    这篇文章主要介绍了微信小程序日历插件怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序日历插件怎么实现文章都会有所收获,下面我们一起来看看吧。微信小程序的日历插件,主要针对酒店选择时间段的日历,带...
    99+
    2023-06-26
  • 如何实现一个微信小程序仪表盘组件
    小编给大家分享一下如何实现一个微信小程序仪表盘组件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言最近开发了一个小程序动态仪表...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作