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


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正则表达式来格式化XML内容
Jul 04 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vue实现行列转换的一种方法
Aug 06 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
js实现拖动缓动效果
Jan 13 Javascript
js实现表格单列按字母排序
Aug 12 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
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php从字符串创建函数的方法
2015/03/16 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
农历与西历对照
2006/09/06 Javascript
js资料prototype 属性
2007/03/13 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
澳大利亚家具商店:Freedom
2020/12/17 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
承诺书的格式范文
2014/03/28 职场文书
小学班主任评语大全
2014/04/23 职场文书
会计求职信
2014/05/29 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python