自定义日期选择器（当前起）
注意：(很懒，没做优化，很多重复代码),这个只适合直接在页面中使用，封装到组件中会有问题，快速滚动然后点击确认时，会自动调用bindchange事件将value下标重置为【0,0，0】，目前我还没办法解决，而且可能还有bug我没测试到的。
微信有自带的日期选择器，但是安卓苹果样式会有差别，而且按钮样式无法修改，无法做到与整个小程序设计样式一致，所以就需要自定义一个。
这里需要用到picker-view组件。
wxml 代码
<view class="picker-view">
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 200px;" value="{{date}}" bindchange="pickerChange">
<picker-view-column>
<view wx:for="{{years}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}日</view>
</picker-view-column>
</picker-view>
<view class="picker-btn-box">
<view class="picker-btn" catchtap="cancelPicker">取消</view>
<view class="picker-cbtn" catchtap="confirmDate">确认</view>
</view>
</view>
js代码（快速滚动取值优化参考（附中的pickerChange））
data:{
nowyear: '',//当前年，用来限定只能选择往后的日期
nowmonth: '',//当前月
nowday: '',//当前日
years: [],//年
months: [],//月
days: [],//日
date: [],//选择器对应显示的下秒
}，
onLoad: function (options) {
//初始化选择器数据
let year = new Date().getFullYear();
let years = [];
for (let i = 0; i < 5; i++) {
years.push(year + i);
}
let month = new Date().getMonth() + 1;
let months = [];
for (let i = 0; i <= (12 - month); i++) {
months.push(month + i);
}
let day = new Date().getDate();
let days = [];
//闰年
if (year % 4 == 0) {
if (month === 2) {//二月
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
} else {//非二月
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {//大月
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {//小月
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
} else {
if (month === 2) {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
}
this.setData({
years: years,
months: months,
days: days,
nowday: day,
nowyear: year,
nowmonth: month
})
},
pickerChange(e) {
let that = this;
let value = e.detail.value;
let date = tool.deepClone(this.data.date);
let d = this.data.days[this.data.date[2]];
//改变年
if (value[0] != this.data.date[0]) {
// 选择本年(月份需要改变)
if (this.data.years[value[0]] == this.data.nowyear) {
let year = this.data.years[value[0]];
let month = this.data.months[value[1]];
let nowmonth = this.data.nowmonth;
if (month <= nowmonth) {
value[1] = 0;
} else {
value[1] = -1;
}
let months = [];
for (let i = 0; i <= (12 - nowmonth); i++) {
months.push(i + nowmonth);
if (value[1] < 0 && (i + nowmonth) == month) {
value[1] = i;
}
}
if (month <= nowmonth) {
let m = nowmonth;
let day = this.data.nowday;
let days = [];
if (year % 4 == 0) {
if (m === 2) {
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
} else {
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
} else {
if (m === 2) {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
} else {
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
}
for (let i = 0; i < days.length; i++) {
if (days[i] == d) {
value[2] = i
that.setData({
days: days,
months: months,
date: value
}, function () {
// that.setData({
// date: value
// })
})
break;
}
if (i == days.length - 1) {
value[2] = days.length - 1;
that.setData({
days: days,
months: months,
date: value
}, function () {
// that.setData({
// date: value
// })
})
}
}
} else {
let day = 1;
let days = [];
if (year % 4 == 0) {
if (month === 2) {
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
} else {
if (month === 2) {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
}
for (let i = 0; i < days.length; i++) {
if (days[i] == d) {
value[2] = i
that.setData({
days: days,
months: months,
date: value
}, function () {
// that.setData({
// date: value
// })
})
break;
}
if (i == days.length - 1) {
value[2] = days.length - 1;
that.setData({
days: days,
months: months,
date: value
}, function () {
// that.setData({
// date: value
// })
})
}
}
}
} else if (this.data.years[this.data.date[0]] == this.data.nowyear) {
let year = this.data.years[value[0]];
let month = this.data.months[value[1]];
let months = [];
for (let i = 1; i <= (12); i++) {
months.push(i);
if ((i) == month) {
value[1] = i-1;
}
}
let day = 1;
let days = [];
if (year % 4 == 0) {
if (month === 2) {
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
} else {
if (month === 2) {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
}
for (let i = 0; i < days.length; i++) {
if (days[i] == d) {
value[2] = i
that.setData({
days: days,
months: months
}, function () {
that.setData({
date: value
})
})
break;
}
if (i == days.length - 1) {
value[2] = days.length - 1;
that.setData({
days: days,
months: months
}, function () {
that.setData({
date: value
})
})
}
}
} else {
//月份不需要改变
let year = this.data.years[value[0]];
let month = this.data.months[value[1]];
let day = 1;
let days = [];
if (year % 4 == 0) {
if (month === 2) {
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
} else {
if (month === 2) {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
}
for (let i = 0; i < days.length; i++) {
if (days[i] == d) {
value[2] = i
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
break;
}
if (i == days.length - 1) {
value[2] = days.length - 1;
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
}
}
}
}
//改变月
if (value[1] != this.data.date[1]) {
//现在是本年
if (this.data.years[value[0]] == this.data.nowyear) {
let year = this.data.years[value[0]];
let month = this.data.months[value[1]];
if (month == this.data.nowmonth) {
let day = this.data.nowday;
let days = [];
if (year % 4 == 0) {
if (month === 2) {
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
} else {
if (month === 2) {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
}
for (let i = 0; i < days.length; i++) {
if (days[i] == d) {
value[2] = i
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
break;
}
if (i == days.length - 1) {
value[2] = days.length - 1;
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
}
}
} else {
let day = 1;
let days = [];
if (year % 4 == 0) {
if (month === 2) {
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
} else {
if (month === 2) {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
}
for (let i = 0; i < days.length; i++) {
if (days[i] == d) {
value[2] = i
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
break;
}
if (i == days.length - 1) {
value[2] = days.length - 1;
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
}
}
}
} else {//现在不是本年
let year = this.data.years[value[0]];
let month = this.data.months[value[1]];
let day = 1;
let days = [];
if (year % 4 == 0) {
if (month === 2) {
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
} else {
if (month === 2) {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
}
}
}
for (let i = 0; i < days.length; i++) {
if (days[i] == d) {
value[2] = i
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
break;
}
if (i == days.length - 1) {
value[2] = days.length - 1;
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
}
}
}
}
//改变日期
if (value[2] != this.data.date[2]) {
this.setData({
date: value
})
}
},
confirmDate(){
//在这里进行时间拼接
let date = this.data.years[this.data.date[0]] + '-' + (this.data.months[this.data.date[1]]<10?'0'+this.data.months[this.data.date[1]]:this.data.months[this.data.date[1]]) + '-' + (this.data.days[this.data.date[2]]<10?'0'+this.data.days[this.data.date[2]]:this.data.days[this.data.date[2]]);
date = date.replace(/-/g, "/");//ios时间格式使用 - 拼接会有问题，建议统一转成 /
},
showPicker() {
//显示选择器
},
cancelPicker() {
//隐藏选择器
},
wxss (略)
最后
测试的不是很全面，可能还有未知bug，还有就是可能反应会稍慢一些，bindchange响应需要一些时间，所以有时候可能滚动的很快然后就点击确认的时候会取用滚动前的下标值。
还有就是下标赋值的部分
that.setData({
days: days,
}, function () {
that.setData({
date: value
})
})
有些地方可能同时赋值会好一些，有些地方就需要错开。
附：在以上基础上修改，只可以选择特定多少天内的日期（几天，超出两个月的时候未作处理）
wxss 以及 wxml 还有 数据格式不变，只是数据以及滚动变化时的函数需要修改一下
data:{
daynum:4,//需要选择的日期时长减1，也可以稍作修改改为所选日期时长，下面的判断自行修改一下即可（<=改为<等，自行判断）
nowTime:'',//记录当前时间(选用，我其他逻辑问题需要用到，代码里可能有的地方用到却未定义),
cancel:false,//是否是点击取消，在显示选择器时置为false，点击取消时置为true
picker:false,//控制显隐
}
js onLoad
onLoad(){
let that = this;
let year = new Date().getFullYear();
let years = [];
let y = tool.fomatTime(new Date().getTime() , 'yyyy');
if (y != year) {
for (let i = 0; i < 2; i++) {
years.push(year + i);
}
} else {
years.push(year)
}
let month = new Date().getMonth() + 1;
let day = new Date().getDate();
let months = [];
let days = [];
if (year % 4 == 0) {
if (month === 2) {
if (29 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
months.push(month);
} else {
for (let i = 0; i <= (29 - day); i++) {
days.push(day + i);
}
months.push(month);
months.push(month + 1);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
if (month == 12) {
if (31 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
months.push(month);
} else {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
months.push(month);
years.push(year + 1)
}
} else {
if (31 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
months.push(month);
} else {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
months.push(month);
months.push(month + 1);
}
}
} else {
if (30 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
months.push(month);
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
months.push(month);
months.push(month + 1);
}
}
}
} else {
if (month === 2) {
if (28 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
months.push(month);
} else {
for (let i = 0; i <= (28 - day); i++) {
days.push(day + i);
}
months.push(month);
months.push(month + 1);
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
if (month == 12) {
if (31 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
months.push(month);
} else {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
months.push(month);
years.push(year + 1)
}
} else {
if (31 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
months.push(month);
} else {
for (let i = 0; i <= (31 - day); i++) {
days.push(day + i);
}
months.push(month);
months.push(month + 1);
}
}
} else {
if (30 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
months.push(month);
} else {
for (let i = 0; i <= (30 - day); i++) {
days.push(day + i);
}
months.push(month);
months.push(month + 1);
}
}
}
}
that.setData({
years: years,
months: months,
days: days,
nowday: day,
nowyear: year,
nowmonth: month,
})
}
js pickerChange()
wxml我没贴，这里函数名可能和上面不同。直接复制的注意下，我是在原来的基础上改的，起了另外的名字。
pickerChange(e) {
let that = this;
let value = e.detail.value;
let date = tool.deepClone(this.data.date);
let d = this.data.days[this.data.date[2]];
let nowday = this.data.nowday;
//改变日期
if (value[2] != this.data.date[2]) {
this.setData({
date: value
}, function () {
if (!that.data.picker&&!that.data.cancel) {
that.confirmDate()
}
})
}
//改变月
if (value[1] != this.data.date[1]) {
let year = this.data.years[value[0]];
let month = this.data.months[value[1]];
let days = [];
let day = nowday;
if (this.data.months[value[1]] == this.data.nowmonth) {//转到本月
month = this.data.nowmonth;
if (year % 4 == 0) {
if (month === 2) {
if (29 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= 29 - day; i++) {
days.push(day + i);
}
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
if (month == 12) {
if (31 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= 31 - day; i++) {
days.push(day + i);
}
}
} else {
if (31 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= 31 - day; i++) {
days.push(day + i);
}
}
}
} else {
if (30 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= 30 - day; i++) {
days.push(day + i);
}
}
}
}
} else {
if (month === 2) {
if (28 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= 28 - day; i++) {
days.push(day + i);
}
}
} else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
if (month == 12) {
if (31 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= 31 - day; i++) {
days.push(day + i);
}
}
} else {
if (31 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= 31 - day; i++) {
days.push(day + i);
}
}
}
} else {
if (30 - day >= that.data.daynum) {
for (let i = 0; i <= that.data.daynum; i++) {
days.push(day + i);
}
} else {
for (let i = 0; i <= 30 - day; i++) {
days.push(day + i);
}
}
}
}
}
value[2] = 0;
that.setData({
days: days,
date: value
}, function () {
if (!that.data.picker&&!that.data.cancel) {
that.confirmDate()
}
})
} else {
let lmonth = month - 1;
let lday = 0;
if (year % 4 == 0) {
if (lmonth === 2) {
lday = that.data.daynum - (29 - day);
for (let i = 1; i <= lday; i++) {
days.push(i);
}
} else {
if (lmonth == 1 || lmonth == 3 || lmonth == 5 || lmonth == 7 || lmonth == 8 || lmonth == 10 || lmonth == 12) {
lday = that.data.daynum - (31 - day);
for (let i = 1; i <= lday; i++) {
days.push(i);
}
} else {
lday = that.data.daynum - (30 - day);
for (let i = 1; i <= lday; i++) {
days.push(i);
}
}
}
} else {
if (lmonth === 2) {
lday = that.data.daynum - (28 - day);
for (let i = 1; i <= lday; i++) {
days.push(i);
}
} else {
if (lmonth == 1 || lmonth == 3 || lmonth == 5 || lmonth == 7 || lmonth == 8 || lmonth == 10 || lmonth == 12) {
lday = that.data.daynum - (31 - day);
for (let i = 1; i <= lday; i++) {
days.push(i);
}
} else {
lday = that.data.daynum - (30 - day);
for (let i = 1; i <= lday; i++) {
days.push(i);
}
}
}
}
value[2] = 0;
that.setData({
days: days,
date: value
}, function () {
if (!that.data.picker&&!that.data.cancel) {
that.confirmDate()
}
})
}
}
//改变年
if (value[0] != this.data.date[0]) {
if (this.data.years[value[0]] == this.data.nowyear) {
let months = [];
let days = [];
months.push(12);
for (let i = 0; i <= (31 - nowday); i++) {
days.push(nowday + i);
}
value[2] = 0;
that.setData({
months: months,
days: days,
date: value
}, function () {
if (!that.data.picker&&!that.data.cancel) {
that.confirmDate()
}
})
} else {
let months = [];
let days = [];
months.push(1);
let lday = that.data.daynum - (31 - nowday);
for (let i = 1; i <= lday; i++) {
days.push(i);
}
value[2] = 0;
that.setData({
months: months,
days: days,
date: value
}, function () {
if (!that.data.picker&&!that.data.cancel) {
that.confirmDate()
}
})
}
}
},
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
