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


Posted in Javascript onSeptember 29, 2017

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

前言:

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

})

}


})

<!---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>

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
JS触摸与手势事件详解
May 09 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
详解Vue的options
May 15 Vue.js
JS设计模式之惰性模式(二)
Sep 29 #Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 #Javascript
详解用Node.js实现Restful风格webservice
Sep 29 #Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 #Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
vue axios同步请求解决方案
Sep 29 #Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 #Javascript
You might like
YII实现分页的方法
2014/07/09 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python中一些深不见底的“坑”
2019/06/12 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
祖国在我心中演讲稿
2014/01/15 职场文书
运动会入场式解说词
2014/02/18 职场文书
小学生操行评语大全
2014/04/22 职场文书
总经理人事任命书
2014/06/05 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
思想作风建设心得体会
2014/10/22 职场文书
农业项目投资意向书
2015/05/09 职场文书
外出学习心得体会范文
2016/01/18 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL