微信小程序的日期选择器
2017-09-26 12:00
218 查看
关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,
就是在2月的时候会有31天,没有进行对闰年的判断等各种情况。看了
官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug!
下面源码:
-----------------------我是分割线--------------------------
<!---js---》
const date =
new Date();//获取系统日期
const years = []
const months = []
const days = []
const bigMonth = [1,3,5,7,8,10,12]
//将日期分开写入对应数组
//年
for (let i =
1990; i <= date.getFullYear(); 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: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
value: [9999,
1, 1],
},
showTo
b956
ask: function() {
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
//判断元素是否在一个数组
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,
})
},
showLoading: function () {
wx.showLoading({
title: '加载中...',
}),
setTimeout(function () {
wx.hideLoading()
},2000)
},
//选择滚动器改变触发事件
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(28);
} else {
// console.log('非闰年')
this.setDays(29);
}
}else {
//大月
if (this.contains(bigMonth, setMonth)){
this.setDays(31)
}else {
this.setDays(30)
}
}
this.setData({
year: setYear,
month: setMonth,
day: setDay
})
}
})
-------------------------我是分割线--------------------
<!---wxml--->
与官方文档是一样的!
<view
style='text-align:center;margin-top:30px;'>{{year}}年{{month}}月{{day}}日</view>
<picker-view
indicator-style="height:50px;"
style='width:100%;height:300px;text-align:center'
value="{{value}}"
bindchange="bindChange">
<picker-view-column>
<view
wx:for="{{years}}"
wx:key="year"
style='line=height:50px;'>
{{item}}年
</view>
</picker-view-column>
<picker-view-column>
<view
wx:for="{{months}}"
wx:key="month">
{{item}}月
</view>
</picker-view-column>
<picker-view-column>
<view
wx:for="{{days}}"
wx:key="day">
{{item}}日
</view>
</picker-view-column>
</picker-view>
</view>
就是在2月的时候会有31天,没有进行对闰年的判断等各种情况。看了
官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug!
下面源码:
-----------------------我是分割线--------------------------
<!---js---》
const date =
new Date();//获取系统日期
const years = []
const months = []
const days = []
const bigMonth = [1,3,5,7,8,10,12]
//将日期分开写入对应数组
//年
for (let i =
1990; i <= date.getFullYear(); 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: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
value: [9999,
1, 1],
},
showTo
b956
ask: function() {
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
//判断元素是否在一个数组
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,
})
},
showLoading: function () {
wx.showLoading({
title: '加载中...',
}),
setTimeout(function () {
wx.hideLoading()
},2000)
},
//选择滚动器改变触发事件
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(28);
} else {
// console.log('非闰年')
this.setDays(29);
}
}else {
//大月
if (this.contains(bigMonth, setMonth)){
this.setDays(31)
}else {
this.setDays(30)
}
}
this.setData({
year: setYear,
month: setMonth,
day: setDay
})
}
})
-------------------------我是分割线--------------------
<!---wxml--->
与官方文档是一样的!
<view
style='text-align:center;margin-top:30px;'>{{year}}年{{month}}月{{day}}日</view>
<picker-view
indicator-style="height:50px;"
style='width:100%;height:300px;text-align:center'
value="{{value}}"
bindchange="bindChange">
<picker-view-column>
<view
wx:for="{{years}}"
wx:key="year"
style='line=height:50px;'>
{{item}}年
</view>
</picker-view-column>
<picker-view-column>
<view
wx:for="{{months}}"
wx:key="month">
{{item}}月
</view>
</picker-view-column>
<picker-view-column>
<view
wx:for="{{days}}"
wx:key="day">
{{item}}日
</view>
</picker-view-column>
</picker-view>
</view>
相关文章推荐
- 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 微信小程序例子——使用picker实现时间和日期选择框
- 微信小程序日期选择器
- 013 - 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 在微信小程序中实现时间日期的选择,并且显示当前选择的时间日期
- 微信小程序-picker组件地区,时间,日期选择
- 微信小程序之picker日期和时间选择器
- 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 微信小程序日期时间选择器使用方法
- 微信小程序日期选择器实例代码
- 转:【微信小程序常见问题】下拉框选择器设置picker属性。(包括:城市、日期和时间选择器)
- 微信小程序picker-view日期选择器
- 微信小程序农阳历日历选择器农阳历日期互转
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 微信小程序WXSS 尺寸单位、样式导入、内联样式、选择器、全局样式与局部样式
- 微信小程序自定义选择框,选择相应的名称
- 微信小程序----日期时间选择器(自定义精确到分秒或时段)(MUI日期时间)
- 如何选择微信小程序开发公司|广州明智科技