背景
借鉴了这位大神的代码 大家去看!
picker-view、微信小程序自定义时间选择器(非官方)
众所周知,小程序原生的pick过于统一化,看起不咋好看~
个性化的时间选择器网上又比较少,so~趁着今天写的项目用到了
写了一个简单的例子,自认为还能看,觉得不好看的亲可以自己再改改呀
图片.gif
看起来系不系还可以呀~
代码在下方自取呀~
最后有gitee地址!!
wxml
<view class="new-date-pick-bg" wx:if="{{propDate}}" bindtap="closePick"></view>
<view class="new-date-pick">
<view class="new-date-pick-input" bindtap="openPick">
<view>{{timeInput == '' ? '选择时间' : timeInput}}</view>
<icon catchtap="clearPick" class="new-date-pick-input-icon" type="cancel" size="23" color="#549EFD"></icon>
</view>
<view class="new-date-pick-body" wx:if="{{propDate}}">
<view class="new-date-pick-main">
<picker-view indicator-class='new-date-pick-col' indicator-style="height: 56rpx;" style="width: 100%; height: 276rpx;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" class="{{ year === item ? 'new-date-pick-col-text' : '' }}" wx:key="years" style="line-height: 56rpx; text-align: center;">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" class="{{ month === item ? 'new-date-pick-col-text' : '' }}" wx:key="months" style="line-height: 56rpx; text-align: center;">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" class="{{ day === item ? 'new-date-pick-col-text' : '' }}" wx:key="days" style="line-height: 56rpx; text-align: center;">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
js
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);}
Page({
data: {
year: getYear,
month: getMonth+1,
day: getDate,
years: years,
months: months,
days: days,
value: [20, getMonth, getDate-1],
timeInput: '',
propDate: false,
},
onLoad: function (options) {
},
closePick() {
this.setData({
propDate: false
})
},
openPick () {
let valueDate = ''
if(this.data.timeInput){
const res = this.data.timeInput.split("-")
const year = res[0].substring(2)
const newRes = [ year-1, res[1]-1, res[2]-1]
valueDate = newRes
}else{
const year = this.data.year.toString().substring(2)
valueDate = [year-1 , this.data.month-1 ,this.data.day-1]
}
this.setData({
propDate: true,
value:valueDate
})
},
clearPick() {
this.setData({
value:'',
timeInput:''
})
},
//判断元素是否在一个数组
contains(arr, obj) {
var i = arr.length;
while (i--) {
if (arr[i] === obj) {
return true;
}
}
return false;
},
setDays(day) {
const temp = [];
for (let i = 1; i <= day; i++) {
temp.push(i)
}
this.setData({
days: temp,
})
},
//选择滚动器改变触发事件
bindChange (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]]
this.setData({
year: setYear,
month: setMonth,
day: setDay
})
if (setMonth === 2) {
this.setDays((setYear % 4 === 0 && setYear % 100 !== 0) ? 29 : 28)
} else {
this.setDays(this.contains(bigMonth, setMonth)? 31 : 30)
}
this.setData({
timeInput: setYear + '-' + setMonth + '-' + setDay
})
}
})
css
page{
background: linear-gradient(136deg, #549EFD 0%, #85D1FD 100%);
padding : 240rpx 80rpx 0 80rpx;
box-sizing: border-box;
}
.new-date-pick-bg{
width: 100%;
height: 100vh;
background-color: transparent;
z-index: 50;
position: fixed;
top: 0;
left: 0;
}
.new-date-pick{
position: relative;
}
.new-date-pick .new-date-pick-input{
position: relative;
width: auto;
text-align: left;
padding:0 32rpx;
border: 2rpx solid #E5E7E9;
background: #FBFCFF;
border-radius: 8rpx;
line-height: 84rpx;
color: rgba(31, 31, 32, 0.32);
font-size: 32rpx;
}
.new-date-pick .new-date-pick-input .new-date-pick-input-icon{
position: absolute;
right: 32rpx;
top: 20rpx;
}
.new-date-pick .new-date-pick-body .new-date-pick-main{
background-color: #fff;
border-radius: 8rpx;
border: 2rpx solid #E5E7E9;
position: absolute;
left: 0;
box-sizing: border-box;
top: 92rpx;
width: 100%;
z-index: 55;
}
.new-date-pick .new-date-pick-col{
background-color: rgba(107, 187, 251, 0.23);
color: #3A91FF;
}
.new-date-pick-col-text{
color: #3A91FF;
font-weight: 400;
}