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


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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
vue实现全选和反选功能
Aug 31 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
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
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
基于php判断客户端类型
2016/10/14 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python tkinter窗口最大化的实现
2019/07/15 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
总经理秘书岗位职责
2014/03/17 职场文书
财务人员担保书
2014/05/13 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
公司离职证明范本
2014/10/17 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Python基础知识学习之类的继承
2021/05/31 Python