怎么在微信小程序中使用picker view时间控件

本篇文章为大家展示了怎么在微信小程序中使用picker view时间控件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

wxml:

<view class="time_screens">  <view >{{year}}-{{month}}-{{day}} {{hour}}:{{minute}}<label >确定</label></view>  <view >  <view class="time-title">年</view>  <view class="time-title">月</view>  <view class="time-title">日</view>  <view class="time-title">时</view>  <view class="time-title">分</view>  </view>  <picker-view indicator-  value="{{value}}" bindchange="bindChange">   <picker-view-column class="picker-text">    <view wx:for="{{years}}" >{{item}}</view>   </picker-view-column>   <picker-view-column class="picker-text">    <view wx:for="{{months}}" >{{item}}</view>   </picker-view-column>   <picker-view-column class="picker-text">    <view wx:for="{{days}}" >{{item}}</view>   </picker-view-column>    <picker-view-column class="picker-text">    <view wx:for="{{hours}}" >{{item}}</view>   </picker-view-column>    <picker-view-column class="picker-text">    <view wx:for="{{minutes}}" >{{item}}</view>   </picker-view-column>  </picker-view> </view>

wxss:

.time-title{  float:left;width:20%;text-align:center;color:#45BCE8 } .picker-text{  text-align:center; } /*mask*/ .time_screens {    width: 100%;    position: fixed; bottom: 0;  left: 0;  z-index: 1000;  opacity: 0.5;  overflow: hidden; }

js：

const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thisMon = date.getMonth(); var thisDay = date.getDate();   for (let i = 2017; i <= date.getFullYear()+1; i++) {  years.push(i) }   for (let i = date.getMonth(); i <= 11; i++) {  var k = i;  if (0 <= i && i < 9) {   k = "0" + (i+1);  }else{   k = (i + 1);  }  months.push(k) } if (0 <= thisMon && thisMon<9){  thisMon = "0" + (thisMon + 1); }else{  thisMon = (thisMon + 1); } if (0 <= thisDay && thisDay<10){  thisDay ="0"+thisDay; }   var totalDay = mGetDate(date.getFullYear(), thisMon);  for (let i = 1; i <= 31; i++) {  var k = i;  if (0 <= i && i < 10) {   k = "0" + i  }  days.push(k) }   for (let i = 0; i <= 23; i++) {  var k=i;  if(0<=i&&i<10){   k="0"+i  }  hours.push(k) } for (let i = 0; i <= 59; i++) {  var k = i;  if (0 <= i && i < 10) {   k = "0" + i  }  minutes.push(k) } function mGetDate(year, month) {  var d = new Date(year, month, 0);  return d.getDate(); } Page({  data: {   years: years,   year: date.getFullYear(),   months: months,   month: thisMon,   days: days,   day: thisDay,   value: [1,thisMon-1,thisDay-1,0,0],   hours: hours,   hour: "00",   minutes: minutes,   minute: "00",  },  bindChange: function (e) {   const val = e.detail.value   this.setData({    year: this.data.years[val[0]],    month: this.data.months[val[1]],    day: this.data.days[val[2]],    hour: this.data.hours[val[3]],    minute: this.data.minutes[val[4]],   })   var totalDay = mGetDate(this.data.year, this.data.month);    var changeDate=[];   for (let i = 1; i <= totalDay; i++) {    var k = i;    if (0 <= i && i < 10) {     k = "0" + i    }    changeDate.push(k)   }   this.setData({    days: changeDate   })  },   })

上述内容就是怎么在微信小程序中使用picker view时间控件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。