微信小程序的日期选择器的实例详解

微信小程序的日期选择器的实例详解

前言：

关于微信小程序中的日期选择器大家用过都会发现有个很大的问题，就是在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],

},

showToask: 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

})

}


})

与官方文档是一样的！

<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日期和时间选择器 # 微信小程序选择器（时间 # 日期 # 地区）实例详解 # 微信小程序自定义时间段picker选择器 # 微信小程序实现日期时间筛选器 # 大月 # 文档 # 会有 # 选择器 # 看了 # 有个 # 如有 # 希望能 # 用过 # 在一 # 谢谢大家 # 等各种 # 进行了 # 疑问请 # 加载中 # 就是在 # 是一样的 # day # showToask # Page

返回目录在线咨询

上一篇：如何有效管理网站的内部链接_SEO优化教程
下一篇：如何在Golang中测试缓存操作_Golang 缓存操作测试实践

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

微信小程序的日期选择器的实例详解

您的项目需求