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

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

wxml:

<viewclass="time_screens">
<view>{{year}}-{{month}}-{{day}}{{hour}}:{{minute}}<label>确定</label></view>
<view>
<viewclass="time-title">年</view>
<viewclass="time-title">月</view>
<viewclass="time-title">日</view>
<viewclass="time-title">时</view>
<viewclass="time-title">分</view>
</view>
<picker-viewindicator-value="{{value}}"bindchange="bindChange">
<picker-view-columnclass="picker-text">
<viewwx:for="{{years}}">{{item}}</view>
</picker-view-column>
<picker-view-columnclass="picker-text">
<viewwx:for="{{months}}">{{item}}</view>
</picker-view-column>
<picker-view-columnclass="picker-text">
<viewwx:for="{{days}}">{{item}}</view>
</picker-view-column>
<picker-view-columnclass="picker-text">
<viewwx:for="{{hours}}">{{item}}</view>
</picker-view-column>
<picker-view-columnclass="picker-text">
<viewwx: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：

constdate=newDate()
constyears=[]
constmonths=[]
constdays=[]
consthours=[]
constminutes=[]
varthisMon=date.getMonth();
varthisDay=date.getDate();

for(leti=2017;i<=date.getFullYear()+1;i++){
years.push(i)
}

for(leti=date.getMonth();i<=11;i++){
vark=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;
}

vartotalDay=mGetDate(date.getFullYear(),thisMon);
for(leti=1;i<=31;i++){
vark=i;
if(0<=i&&i<10){
k="0"+i
}
days.push(k)
}

for(leti=0;i<=23;i++){
vark=i;
if(0<=i&&i<10){
k="0"+i
}
hours.push(k)
}
for(leti=0;i<=59;i++){
vark=i;
if(0<=i&&i<10){
k="0"+i
}
minutes.push(k)
}
functionmGetDate(year,month){
vard=newDate(year,month,0);
returnd.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){
constval=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]],
})
vartotalDay=mGetDate(this.data.year,this.data.month);
varchangeDate=[];
for(leti=1;i<=totalDay;i++){
vark=i;
if(0<=i&&i<10){
k="0"+i
}
changeDate.push(k)
}
this.setData({
days:changeDate
})
},

})

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