怎么在微信小程序中使用时间选择插件

这篇文章给大家介绍怎么在微信小程序中使用时间选择插件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

wxml

<modalclass="modal"hidden="{{flag}}"no-cancelbindconfirm="getTime"confirmText="确定">
<viewclass="modal-content">
<viewclass="time_screens">
<view>{{year}}-{{month}}-{{day}}{{hour}}:{{minute}}</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>
</view>
</modal>

js:

constdate=newDate()
constyears=[]
constmonths=[]
constdays=[]
consthours=[]
constminutes=[]
varthisMon=date.getMonth();
varthisDay=date.getDate();
varthisHours=date.getHours();
varthisMinutes=date.getMinutes();
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();
}

varapp=getApp();
varapi=app.globalData.api;
Page({

/**
*页面的初始数据
*/
data:{

checkTime:date.getFullYear()+"-"+thisMon+"-"+thisDay+""+thisHours+":"+thisMinutes,
//---时间控件参数
flag:true,
years:years,
year:date.getFullYear(),
months:months,
month:thisMon,
days:days,
day:thisDay,
value:[1,thisMon-1,thisDay-1,0,0],
hours:hours,
hour:thisHours,
minutes:minutes,
minute:thisMinutes,
},

showModel:function(e){
this.setData({flag:false});
},
getTime:function(e){
vartimes=this.data.year+"-"+this.data.month+"-"+this.data.day+""+this.data.hour+":"+this.data.minute
this.setData({
flag:true,
checkTime:times
});
},
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
})
},

})

css:

.kouviewList{
background-color:#F7F7F7;
}
.kouview{
height:170px;
margin-top:5px;

}
.kouviews{
height:150px;
margin-top:5px;

}
.time-title{
float:left;width:20%;text-align:center;color:#45BCE8
}
.picker-text{
text-align:center;
}

关于怎么在微信小程序中使用时间选择插件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。