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


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更改class和id的方法
Oct 10 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
package.json文件配置详解
Jun 15 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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的FTP学习(二)
2006/10/09 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python制作抖音代码舞
2019/04/07 Python
python代码编写计算器小程序
2020/03/30 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
销售代表求职自荐信
2013/10/01 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
写给领导的感谢信
2015/01/22 职场文书
校园开放日新闻稿
2015/07/17 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS