picker-view自定义时间选择器
官网的自定义时间选择器比较简陋、日期不准
下面是我自己写的一个demo
<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="width: 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;
width: 200rpx;
}
.baseList .list .listMain{
position: relative;
width: 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%;
width: 100%;
background-color: rgba(0,0,0,.7);
}
.propTimeBody .propTimeMain{
background-color: #fff;
position: absolute;
left: 0;
bottom: 0;
width: 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)
},