小程序框架wepy下 picker实现日期时间的组件

关于小程序框架wepy下 picker实现日期时间的组件，亲测能用

   找了很多wepy文档都没有日期时间封装好的组件，这里给大家分享一个wepy实现日期时间的组件封装，虽然不是很完整能达到每个人想要的效果

 

<!-- 子组件 common.wepy -->
<template>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
      <input value="{{time}}" placeholder="选择时间"/>
    </picker>
  </template>
<script>
import wepy from '@wepy/core';
const date = new Date();
const years = [];
const months = [];
const days = [];
const hours = [];
const minutes = [];
const seconds = [];
//获取年
for (let i = 2018; i <= date.getFullYear() + 5; i++) {
  years.push("" + i);
}
//获取月份
for (let i = 1; i <= 12; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  months.push("" + i);
}
//获取日期
for (let i = 1; i <= 31; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  days.push("" + i);
}
//获取小时
for (let i = 0; i < 24; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  hours.push("" + i);
}
//获取分钟
for (let i = 0; i < 60; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  minutes.push("" + i);
}
//获取秒
for (let i = 1; i <= 12; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  seconds.push("" + i);
}
wepy.component ({
  data : {
    time: '',
    multiArray: [years, months, days, hours, minutes, seconds],
    multiIndex: [0, 9, 16, 10, 17, 0],
    choose_year: '',
  },
  methods : {
    //获取时间日期
    bindMultiPickerChange: function(e) {
      console.log('picker发送选择改变，携带值为',e.$wx.detail.value)
      this.multiIndex = e.$wx.detail.value;
      const index = this.multiIndex;
      const year = this.multiArray[0][index[0]];
      const month = this.multiArray[1][index[1]];
      const day = this.multiArray[2][index[2]];
      const hour = this.multiArray[3][index[3]];
      const minute = this.multiArray[4][index[4]];
      const seconds = this.multiArray[5][index[5]];
      // console.log(`${year}-${month}-${day}-${hour}-${minute}`);
      this.time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;  //页面显示不带秒
      let time1 = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + seconds;   //传给后台带秒
      this.$emit('getStartTime', time1);   //开始时间
      this.$emit('getEndTime', time1);     //结束时间
      
      // console.log(this.time)
    },
    //监听picker的滚动事件
    bindMultiPickerColumnChange: function(e) {
      //获取年份
      if (e.$wx.detail.column == 0) {
        let choose_year = this.multiArray[e.$wx.detail.column][e.$wx.detail.value];
        console.log(choose_year);
        this.choose_year = choose_year;
      }
      //console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
      if (e.$wx.detail.column == 1) {
        let num = parseInt(this.multiArray[e.$wx.detail.column][e.$wx.detail.value]);
        let temp = [];
        if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
          for (let i = 1; i <= 31; i++) {
            if (i < 10) {
              i = "0" + i;
            }
            temp.push("" + i);
          }
          this.multiArray[2] = temp;
        } else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
          for (let i = 1; i <= 30; i++) {
            if (i < 10) {
              i = "0" + i;
            }
            temp.push("" + i);
          }
          this.multiArray[2] = temp;
        } else if (num == 2) { //判断2月份天数
          let year = parseInt(this.choose_year);
          console.log(year);
          if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
            for (let i = 1; i <= 29; i++) {
              if (i < 10) {
                i = "0" + i;
              }
              temp.push("" + i);
            }
            this.multiArray[2] = temp;
          } else {
            for (let i = 1; i <= 28; i++) {
              if (i < 10) {
                i = "0" + i;
              }
              temp.push("" + i);
            }
            this.multiArray[2] = temp;
          }
        }
        console.log(this.multiArray[2]);
      }
      this.multiIndex[e.$wx.detail.column] = e.$wx.detail.value;
    },
  },
  onLoad () {
    //设置默认的年份
    this.choose_year = this.multiArray[0][0]
  }
})
​
</script>
<style lang="less">
.time-picker{
    width: 240rpx;
}
input{
  text-align: right;
}
</style>

<!-- 父组件 index.wepy -->
  <template>
  <view class="container">
      <!-- 开始时间 -->
      <view class="cell cell-sta">
        <view>开始时间</view>
        <view><Common @getStartTime="getStartTime"></Common></view>
      </view>
      <!-- 结束时间 -->
      <view class="cell cell-sta">
        <view>结束时间</div>
        <view><Same @getEndTime="getEndTime"></Same></div>
      </view>
  </view>
</template>
<script>
import wepy from '@wepy/core';
wepy.page({
  data: {
    params: {
      kssj: "",
      jzsj: "",
    },
  
  methods: {
    // 开始时间
    getStartTime(data) {
      let self = this;
      // console.log(data)
      if(self.params.jzsj != '' || self.params.jzsj == ''){
        let startDate = new Date(data).getTime()
        let endDate = new Date(self.params.jzsj).getTime()
        if(startDate >= endDate){
          wx.showToast({
            title: "抢单开始时间不得晚于抢单结束时间",
            duration: 3000,
            icon: "none"
          })
        }else{
          self.params.kssj = data;
        }
      }else{
        self.params.kssj = data;
      }
    },
    // 结束时间
    getEndTime(data) {
      let self = this;
      if(self.params.kssj != ""){
        let startDate = new Date(self.params.kssj).getTime()
        let endDate = new Date(data).getTime()
        if(startDate >= endDate){
          wx.showToast({
            title: "抢单结束时间不得早于抢单开始时间",
            duration: 3000,
            icon: "none"
          })
          return
        }else{
          self.params.jzsj = data;
        }
      }
      else{
        self.params.jzsj = data;
      }
    },
  },
  
})
</script>
<config>
    {
      "navigationBarTitleText":"首页",
        "usingComponents":{
            "Common":"~@/components/common",
            "Same":"~@/components/common"
        }    
    }
</config>
<style lang="less" scoped>
.cell {
  background: #fff;
  border-bottom: 1rpx solid #e2e5e9;
}
.cell-sta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80rpx;
  font-size: 32rpx;
  color: #333;
  padding: 0 20rpx;
}
</style>
​

小程序wepy的坑，希望能给大家带来一点帮助，

默认显示

 

点击选择显示

选择后显示