微信小程序用picker-view 实现时间的选择 及加减

微信小程序js部分

// addons/auct/tong2/tong2.js
const date = new Date();
const days = [];
const hours = [];
const minute = [];
var monthDaySize;
var month = date.getMonth();

if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
  monthDaySize = 31;
} else if (month == 4 || month == 6 || month == 9 || month == 11) {
  monthDaySize = 30;
} else if (month == 2) {
  // 计算是否是闰年,如果是二月份则是29天
  if ((year - 2000) % 4 == 0) {
    monthDaySize = 29;
  } else {
    monthDaySize = 28;
  }
};

for (let i = 0; i <= monthDaySize; i++) {
  days.push(i)
}
for (let i = 0; i <= 23; i++) {
  hours.push(i)
}
for (let i = 0; i <= 59; i++) {
  minute.push(i)
}


var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:'',
    type: "record",
    tankuang: false,
    minute: minute,
    hours: hours,
    days: days,
    value: [],
    times_s: [],
    times: [],
    per_money: '',
    refund_price: '',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    var that = this;
    //获取状态栏的高度
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          statusBarHeight: res.statusBarHeight,
        })
      }
    })
  },



  //显示弹框
  tankuang: function () {
    var ta = this,
      type = ta.data.type;
      const date = new Date();
      if (ta.data.times_s != '') {
        ta.setData({
          tankuang: true,
        })
      }else{
        if (type != 'all') {
        ta.setData({
          value: [date.getDate() , date.getHours() , date.getMinutes() ],
          times: {
            day: date.getDate(),
            hours: date.getHours(),
            minute: date.getMinutes(),
          },
        })
      } else {
        ta.setData({
          value: [date.getHours() , date.getMinutes()],
          times: { hours: date.getHours(),
            minute: date.getMinutes(),
          },
        });
      }
      ta.setData({
        tankuang: true,
        times_s:[],
      })
      }
  },
  //选择时间
  bindChange: function (e) {
    const date = new Date();
    const ta = this,
      val = e.detail.value,
      type = ta.data.type;
    if (type != 'all') {
      var day = this.data.days[val[0]],
        hours = this.data.hours[val[1]],
        minute = this.data.minute[val[2]],
        data = {  day,  hours,  minute  };
    } else {
      var hours = this.data.hours[val[0]],
        minute = this.data.minute[val[1]],
      data = {  hours,  minute  };
    }
    ta.setData({
      times_s: data,
      value: val
    })
  },
  //弹框确定和取消
  enterbut: function (e) {
    console.log(e)
    var that = this,
      type = e.currentTarget.dataset.type,
      times_s = that.data.times_s;
      const date = new Date();
    that.setData({
      tankuang: false
    })
    if (type == "quxiao") {
      that.setData({
        value: [],
      })
    } else {
      if (that.data.times_s != '') {
        that.setData({
          times: times_s,
          value: that.data.value
        })
      } else {
        if (type != 'all') {
          that.setData({
            times: {
              day: date.getDate(),
              hours: date.getHours(),
              minute: date.getMinutes(),
            },
          })
        } else {
          that.setData({
            times: {
              hours: date.getHours(),
              minute: date.getMinutes(),
            },
          })

        }
      }

    }
  },

  //加减
  increase: function (e) {
    var ta = this,
      id = e.currentTarget.dataset.id,
      num = ta.data.num;
    //减
    if (id == 1) {
      num -= 1;
    } else {
      num += 1;
    }
    ta.setData({
      num: num,
    })
  },
  totalInput: function (e) {
    let num = this.data.num
    this.setData({
      num: num
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      list: [],
      value: [],
      times: []
    });
    this.getlist();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getlist();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

微信小程序页面

<view style="width: 750rpx; min-height: 100vh;background: #F4F4F4;color: #333333;margin: 0; padding: 0;">
  <view class="add" >
          <view class="jian width_height add" data-id="1"  catchtap="increase">
            <view class="jian_line"></view>
          </view>
          <input style="margin:0 0rpx ; text-align: center;  width: 69rpx;padding: 0;" disabled="true" type="number" bindinput="totalInput" value="{{num?num:0}}" />
          <view class="jia width_height add" data-id="2" catchtap="increase" ><view style="height: 50rpx;">+</view></view>
        </view>
  <view class="switch " style="position: absolute;top: {{statusBarHeight+80}}px;left: 0; padding: 0 24rpx 0;">
      <view class="subject">
        <view class="display_a_j_between" style="margin-top: 44rpx;">
          <view>
            <view style="font-size:30rpx">选择时间</view>
          </view>
          <view class="display_a" style="font-size:30rpx;font-weight:bold;" wx:if="times.day" >  
            {{type=='record'&&times.day!=undefined? times.day+'号':' 00号'}}  {{ times.hours!=undefined?times.hours+':':' 00点'}}{{ times.minute!=undefined?times.minute:' 00分'}}
          </view>
          <view class="display_a" style="font-size:30rpx;font-weight:bold;" wx:else>  
          </view>
        </view>
      </view>
    <button  catchtap="tankuang">时间按钮</button>
  </view>
 
  <view wx:if="{{tankuang}}" data-type="quxiao" catchtap="enterbut" class="tankuang">
    <picker-view  class="pickerview" indicator-style="height: 70px;width:750rpx;   background:rgba(109, 109, 109, 0.3) " style="width: 100%;  height: 322px;" value="{{value}}" bindchange="bindChange">
      <picker-view-column wx:if="{{type!='all'}}">
        <view wx:for="{{days}}" wx:key="index" class="add">{{item<10?'0':''}}{{item}}号</view>
      </picker-view-column>
      <picker-view-column >
        <view wx:for="{{hours}}" wx:key="index" class="add">{{item<10?'0':''}}{{item}}点</view>
      </picker-view-column>
      <picker-view-column s>
        <view wx:for="{{minute}}" wx:key="index"class="add">{{item<10?'0':''}}{{item}}分</view>
      </picker-view-column>
      <view class="look display_a_j_between"><view data-type="quxiao" catchtap="enterbut" style="text-align: center;width: 50%;height: 100%;">取消</view> <view data-type="queding" catchtap="enterbut"  style="text-align: center;width: 50%;height: 100%;">确定</view>  </view>
    </picker-view>
  </view>
</view>

微信小程序css

/* addons/auct/tong2/tong2.wxss */
.display_a {
  display: flex;
  align-items: center;
}

.display_a_end {
  display: flex;
  align-items: flex-end;
}

.add {
  display: flex;
  justify-content: center;
  align-items: center;

}

.text_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text_danhang {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.display_a_j_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.display_a_j_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.display_a_j_top_b {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.top {
  width: 750rpx;
  height: 526rpx;
  border: 0;
  background: linear-gradient(180deg, #6FA3FD, #F4F4F4);
}

.switch {
  width: 750rpx;
  box-sizing: border-box;
}

.switch_body {
  background: #FFFFFF;
  box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
}

.switch_top {
  position: relative;
  width: 100%;
  height: 100%;
  background: #C1D7FF;
  border-radius: 16rpx 16rpx 0px 0px;
}

.top_taps {
  width: 50%;
  height: 72rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.top_img1 {
  position: absolute;
  top: -8px;
  left: 0;
  background: #FFFFFF;
  width: 352rpx;
  height: 122rpx;
  border-radius: 16rpx 16rpx 0px 0px;
}

.top_img2 {
  position: absolute;
  top: -8px;
  right: 0;
  background: #FFFFFF;
  width: 352rpx;
  height: 122rpx;
  border-radius: 16rpx 16rpx 0px 0px;
}

.subject {
  padding: 32rpx 20rpx 40rpx;
}

.addressrom {
  width: 300rpx;
  font-size: 36rpx;
  font-weight: bold;
}

.address_name {
  font-size: 26rpx;
  color: #999999;
  padding-top: 16rpx;
}
.mi{
  font-size: 24rpx;
  color: #EB9033;
}
.shade_bai {
  margin-top: 20rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
  padding: 24rpx 20rpx;
}

.ico_idx {
  text-align: right;
  margin-top: 16rpx;
}


.content_img {
  width: 168rpx;
  height: 168rpx;
  box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
}

.theme_a {
  width: 294rpx;
  height: 32rpx;
  font-size: 28rpx;
  color: #333333;
}

.theme_b {
  width: 280rpx;
  height: 54rpx;
  font-size: 20rpx;
  color: #999999;
  margin: 16rpx 0 22rpx;
}

.theme_c {
  width: 124rpx;
  height: 36rpx;
  font-size: 20rpx;
  color: #F3473D;
}


.width_height {
  width: 44rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  font-size: 44rpx;
}

.jian {
  border: 2rpx solid #DFDBDB;
  border-radius: 50%;
  font-weight: bold;
  color: #DFDBDB;
}

.jian_line {
  width: 28rpx;
  height: 4rpx;
  background: #DFDBDB;
  border-radius: 60rpx;
}

.jia {
  background: #EB9033;
  border-radius: 50%;
  color: #fff;
}

.shade_but {
  box-shadow: 0px 4rpx 4rpx rgba(9, 75, 217, 0.28);
  border-radius: 60rpx;
  color: #fff;
  font-size: 32rpx;
  width: 216rpx;
  height: 68rpx;
  background: #4089FF;
  border-radius: 60rpx;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 20rpx 20rpx 48rpx;
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.1);
  width: 750rpx;
  height: 144rpx;
  background: #FFFFFF;
}
.tankuang{
  width: 750rpx;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
}
.pickerview{
  position: absolute;
  bottom:0 !important;
  left: 0 !important;
  background-color: #FFFFFF;
}
.look{
  width: 100%;
  height: 148rpx;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  background-color: #fff;
}

picker-view | 微信开放文档 (qq.com)