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


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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
vue el-table实现行内编辑功能
Dec 11 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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
实用函数7
2007/11/08 PHP
PHP SQLite类
2009/05/07 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python测试驱动开发实例
2014/10/08 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
关于安全的演讲稿
2014/05/09 职场文书
新店开张活动方案
2014/08/24 职场文书
创先争优个人承诺书
2014/08/30 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2014年党总支工作总结
2014/12/18 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
python元组打包和解包过程详解
2021/08/02 Python
利用JavaScript写一个简单计算器
2021/11/27 Javascript
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技