picker-view自定义时间选择器
官网的自定义时间选择器比较简陋、日期不准
下面是我自己写的一个demo
![](https://img2020.cnblogs.com/blog/2018015/202006/2018015-20200607165432129-1768673675.png)
<view class="baseList"> <view class="list clearfix"> <view class="fl listName"><text class="reqIcon">*</text> 参展时间</view> <view class="listMain fr" bindtap="dateMainBtn"> <!-- <input class="rightInput" placeholder="请选择日期" name='startTime' value="{{timeInput}}"></input> --> <view>{{timeInput == '' ? '选择时间' : timeInput}}</view> </view> <view class="propTimeBody" wx:if="{{propDate}}"> <view class="propTimeMain"> <view class="propTop clearfix"> <text class="fl noBtn" bindtap="noBtnTime">取消</text> <text>{{year}}-{{month}}-{{day}} {{isDaytime ? "上午" : "下午"}}</text> <text class="fr okBtn" bindtap="okBtnTime">确定</text> </view> <picker-view indicator-style="height: 50px;" style=" 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> <picker-view-column> <view wx:for="{{years}}" wx:key="years" style="line-height: 50px; text-align: center;">{{item}}年</view> </picker-view-column> <picker-view-column> <view wx:for="{{months}}" wx:key="months" style="line-height: 50px; text-align: center;">{{item}}月</view> </picker-view-column> <picker-view-column> <view wx:for="{{days}}" wx:key="days" style="line-height: 50px; text-align: center;">{{item}}日</view> </picker-view-column> <picker-view-column> <view class="icon-container" style="line-height: 50px; text-align: center;"> 上午 </view> <view class="icon-container" style="line-height: 50px; text-align: center;"> 下午 </view> </picker-view-column> </picker-view> </view> </view> </view> </view>
.baseList{
padding: 40rpx 30rpx 20rpx;
}
.baseList .list{
font-size: 32rpx;
color: #333;
line-height: 80rpx;
margin-bottom: 20rpx;
}
.baseList .list .listName{
text-align: right;
200rpx;
}
.baseList .list .listMain{
position: relative;
470rpx;
padding: 0 20rpx;
text-align: left;
border: 1rpx solid #ddd;
border-radius: 16rpx;
line-height: 80rpx;
height: 80rpx;
}
.propTimeBody{
position: fixed;
left: 0;
top: 0;
z-index: 99;
height: 100%;
100%;
background-color: rgba(0,0,0,.7);
}
.propTimeBody .propTimeMain{
background-color: #fff;
position: absolute;
left: 0;
bottom: 0;
100%;
z-index: 111;
}
.propTimeBody .propTimeMain .propTop{
text-align: center;
padding: 30rpx 20rpx;
font-size: 32rpx;
color: #333;
}
.propTimeBody .propTimeMain .propTop .noBtn{
color: #666;
}
.propTimeBody .propTimeMain .propTop .okBtn{
color: #0084ff;
}
const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1, 3, 5, 7, 8, 10, 12] //将日期分开写入对应数组 //年 var getYear = date.getFullYear() var getMonth = date.getMonth() var getDate = date.getDate() for (let i = getYear - 20; i <= getYear + 20; i++) { years.push(i); } //月 for (let i = 1; i <= 12; i++) { months.push(i); } //日 for (let i = 1; i <= 31; i++) { days.push(i); }
years: years,
year: getYear,
months: months,
month: getMonth+1,
days: days,
day: getDate,
value: [20, getMonth, getDate-1],
isDaytime: true,
timeInput: '',
propDate: false,
dateMainBtn () { let setYear = this.data.year; let setMonth = this.data.month; let setDay = this.data.day let dateTimeBody = setYear + '-' + setMonth + '-' + setDay let todays = this.data.isDaytime === true ? '上午' : '下午' wx.setStorageSync('adminDate', dateTimeBody) wx.setStorageSync('adminTodays', todays) this.setData({ propDate: true }) }, okBtnTime () { this.setData({ propDate: false, timeInput: wx.getStorageSync('adminDate') + wx.getStorageSync('adminTodays'), }) }, noBtnTime () { this.setData({ propDate: false }) }, //判断元素是否在一个数组 contains: function (arr, obj) { var i = arr.length; while (i--) { if (arr[i] === obj) { return true; } } return false; }, setDays: function (day) { const temp = []; for (let i = 1; i <= day; i++) { temp.push(i) } this.setData({ days: temp, }) }, //选择滚动器改变触发事件 bindChange: function (e) { const val = e.detail.value; //判断月的天数 const setYear = this.data.years[val[0]]; const setMonth = this.data.months[val[1]]; const setDay = this.data.days[val[2]] //console.log(setYear + '-' + setMonth + '-' + setDay); //闰年 if (setMonth === 2) { if (setYear % 4 === 0 && setYear % 100 !== 0) { console.log('闰年') this.setDays(29); } else { console.log('非闰年') this.setDays(28); } } else { //大月 if (this.contains(bigMonth, setMonth)) { this.setDays(31) } else { this.setDays(30) } } this.setData({ year: setYear, month: setMonth, day: setDay, isDaytime: !val[3] }) let dateTimeBody = setYear + '-' + setMonth + '-' + setDay let todays = !val[3] === true ? '上午' : '下午' wx.setStorageSync('adminDate', dateTimeBody) wx.setStorageSync('adminTodays', todays) },