登录  /  注册

如何开发一个微信小程序的日期选择器

一个新手
发布: 2017-10-07 11:39:04
原创
2707人浏览过

关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,

就是在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: &#39;成功&#39;,
icon: &#39;success&#39;,
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: &#39;加载中...&#39;,
}),
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 + &#39;年&#39; + setMonth + &#39;月&#39; + setDay + &#39;日&#39;);
//闰年
if (setMonth === 2) {
if (setYear % 4 === 0 && setYear % 100 !== 0) {
// console.log(&#39;闰年&#39;)
this.setDays(28);
} else {
// console.log(&#39;非闰年&#39;)
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=&#39;text-align:center;margin-top:30px;&#39;>{{year}}年{{month}}月{{day}}日</view>
<picker-viewindicator-style="height:50px;"style=&#39;width:100%;height:300px;text-align:center&#39;value="{{value}}"bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" wx:key="year" style=&#39;line=height:50px;&#39;>
{{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>
登录后复制

以上就是如何开发一个微信小程序的日期选择器的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号