最近在研究微信小程序，需要实现一个自定义日期的功能，类似于猫眼app上选择日期，可以按日、按周、按月、按年、自定义日期，为此特地将其写成了一个组件，供有需要的朋友参考。
本人所用框架是wepy,所以此组件结构为wepy代码结构。
大致介绍：
1.按日的日历控件采用的极点日历插件，详情请看：https://github.com/czcaiwj/calendar；
2.组件中所用到的一些组件为ivew weapp组件，详情使用请看我的另一篇分享：https://www.jianshu.com/p/e07b7cf5e494；
3.组件中按周选择，周我是从2017年至今取的，具体实现可看我另一篇分享：https://www.jianshu.com/p/5112df795162；在本篇onload()方法里也有实现；因本人开发需要，设定功能为按周可多选，这个可以根据自身开发需求调整；
4.本组件时间默认从17年开始至今，也可根据自身实际需求调整。
实现效果：
代码如下：
<style type="less"> .home { height: 100%; .calendar-header { font-size: large; color: #406bf8; } .calendar-board { color: #406bf8; } .week_year_style { font-size: 30 rpx; padding: 20 rpx 15 rpx; text-align: center; } .week_selectyear_style { background-color: #fff; color: #406bf8; } .calendar { background-color: #fcfcfc; //padding-top: 10px; } }</style><template> <view class="home page"> <i-tabs current="{{ currenttab }}" color="#406bf8" bindchange="handlechangetab"> <i-tab key="按日" title="按日"></i-tab> <i-tab key="按周" title="按周"></i-tab> <i-tab key="按月" title="按月"></i-tab> <i-tab key="按年" title="按年"></i-tab> <i-tab key="自定义" title="自定义"></i-tab> </i-tabs> <view hidden="{{currenttab != '按日'}}" style="margin-top: 30rpx"> <calendar cell-size="40" show-more-days="true" lunar="true" weeks-type="cn" calendar-style="calendar" header-style="calendar-header" board-style="calendar-board" days-color="{{days_style}}" start-date="2017-01" end-date="2018-08" binddayclick="dayclick" bindnextmonth="next" bindprevmonth="prev" /> </view> <view hidden="{{currenttab != '按周'}}"> <view style="display: flex"> <view style="width: 160rpx;background-color: #f6f6f6;border-right: 1rpx solid #e6e6e6"> <block wx:for="{{yeararray}}" wx:for-item="item" wx:key="item"> <view class="week_year_style {{weeksyears==item?'week_selectyear_style':''}}" bindtap='changeweekyear({{item}})'>{{item + '年'}} </view> </block> </view> <scroll-view scroll-y style="height: 600px;"> <i-cell-group> <block wx:for="{{weeksarray[weeksyears]}}" wx:for-item="category" wx:key="category"> <i-cell title="{{category.weeks}}" bindtap="handleweekschange('{{index}}')"> <i-icon wx:if="{{category.select}}" type="right" size="20" color="#406bf8" slot="footer"/> </i-cell> </block> </i-cell-group> </scroll-view> </view> </view> <view hidden="{{currenttab != '按月'}}"> <view style="display: flex"> <view style="width: 160rpx;background-color: #f6f6f6;border-right: 1rpx solid #e6e6e6"> <block wx:for="{{yeararray}}" wx:for-item="item" wx:key="item"> <view class="week_year_style {{monthyear==item?'week_selectyear_style':''}}" bindtap='changemonthyear({{item}})'>{{item + '年'}} </view> </block> </view> <scroll-view scroll-y style="height: 600px;"> <i-cell-group> <block wx:for="{{monthyear==year?currentmontharray:fullmontharray}}" wx:for-item="category" wx:key="*this"> <i-cell title="{{category+'月'}}" bindtap="handlemonthchange('{{category}}')"> <i-icon wx:if="{{category==selectmonth}}" type="right" size="20" color="#406bf8" slot="footer"/> </i-cell> </block> </i-cell-group> </scroll-view> </view> </view> <view hidden="{{currenttab != '按年'}}"> <i-cell-group> <block wx:for="{{yeararray}}" wx:for-item="category" wx:key="category"> <i-cell title="{{category+'年'}}" bindtap="handleyearchange('{{category}}')"> <i-icon wx:if="{{category==selectyear }}" type="right" size="20" color="#406bf8" slot="footer"/> </i-cell> </block> </i-cell-group> </view> <view hidden="{{currenttab != '自定义'}}" style="margin-top: 30rpx"> <calendar cell-size="40" show-more-days="true" lunar="true" weeks-type="cn" calendar-style="calendar" header-style="calendar-header" board-style="calendar-board" days-color="{{define_days_style}}" start-date="2017-01" end-date="2018-08" binddayclick="dayclick_define" bindnextmonth="next_define" bindprevmonth="prev_define" /> </view> </view></template><script> import wepy from 'wepy'; const months = ['jan.', 'feb.', 'mar.', 'apr.', 'may.', 'june.', 'july.', 'aug.', 'sept.', 'oct.', 'nov.', 'dec.']; export default class tabscontent extends wepy.component { props = { opendatemodal: { type: boolean, default: false, twoway: true }, dateselect: { type: string, default: '', twoway: true }, datefilter: { type: string, default: '', twoway: true }, filterweekarray: { type: string, default: '', twoway: true }, filterweekselect: { type: string, default: '', twoway: true } }; data = { currenttab: '按日', //tabs页切换 year: new date().getfullyear(), // 年份 month: new date().getmonth() + 1, // 月份 day: new date().getdate(), str: months[new date().getmonth()], // 月份字符串 days_style: [{month: 'current', day: new date().getdate(), color: '#fff', background: '#eb4986'}], //按日选中日期样式 selectdate: [], //按日选择的日期 yeararray: [], //从2017年起至今 weeksyears: new date().getfullyear(), //按周选择了哪一年 weeksarray: {}, //从2017年起至今的所有周 selectweekarray: [], //选择的周 fullmontharray: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], currentmontharray: [], //今年过了几个月 monthyear: new date().getfullyear(), //按月选择了哪一年 selectmonth: 0, //按月选择了哪一月 selectyear: 0, //按年选择了哪一年 define_days_style: [{month: 'current', day: new date().getdate(), color: '#fff', background: '#eb4986'}], //自定义日期格式 selectdate_define: [] }; methods = { handlechangetab({detail}) { this.currenttab = detail.key this.datefilter = this.currenttab }, dayclick: function (event) { let style = (event.detail.year == this.year && event.detail.month == this.month) ? [{month: 'current', day: new date().getdate(), color: '#fff', background: '#eb4986'}, {month: 'current', day: event.detail.day, color: '#fff', background: '#406bf8'}] : [{month: 'current', day: event.detail.day, color: '#fff', background: '#406bf8'}] this.days_style = style this.selectdate = [event.detail.year, event.detail.month, event.detail.day] this.opendatemodal = false this.datefilter = this.currenttab this.dateselect = [event.detail.year, event.detail.month, event.detail.day] }, next: function (event) { if (event.detail.currentyear == this.year && event.detail.currentmonth == this.month) this.days_style = [{ month: 'current', day: new date().getdate(), color: '#fff', background: '#eb4986' }] else this.days_style = [vent.detail.year, event.detail.month, event.detail.day] }, prev: function (event) { this.days_style = [] }, changeweekyear(year) { this.weeksyears = year }, handleweekschange(weekindex) { this.weeksarray[this.weeksyears][weekindex].select = !this.weeksarray[this.weeksyears][weekindex].select if (this.selectweekarray[this.weeksyears]) { let bool = this.selectweekarray[this.weeksyears].some(index => index == weekindex) if (bool) { //真 已存在 delete //if(this.selectweekarray[this.weeksyears].length>1) this.selectweekarray[this.weeksyears].remove(weekindex) } else { //假 push this.selectweekarray[this.weeksyears].push(weekindex) this.selectweekarray[this.weeksyears].sort() } } else { let temp = {} temp[this.weeksyears] = [] let a = [weekindex] temp[this.weeksyears] = a this.selectweekarray = temp } this.filterweekselect = this.selectweekarray //回调到父级页面 }, changemonthyear(year) { this.monthyear = year }, handlemonthchange(month) { this.selectmonth = month this.opendatemodal = false this.datefilter = this.currenttab this.dateselect = [this.monthyear, this.selectmonth] }, handleyearchange(year) { this.selectyear = year this.opendatemodal = false this.datefilter = this.currenttab this.dateselect = [year] }, dayclick_define: function (event) { let style = [] if (this.selectdate_define.length == 0) { //第一次点击 this.selectdate_define.push([event.detail.year, event.detail.month, event.detail.day]) if (event.detail.year == this.year && event.detail.month == this.mounth) { style = [{month: 'current', day: new date().getdate(), color: '#fff', background: '#eb4986'}, {month: 'current', day: event.detail.day, color: '#fff', background: '#406bf8'}] } this.define_days_style = style } else if (this.selectdate_define.length == 1) { //选中第二个日期就关闭页面 this.selectdate_define.push([event.detail.year, event.detail.month, event.detail.day]) this.define_days_style.push({ month: 'current', day: event.detail.day, color: '#fff', background: '#406bf8' }) this.opendatemodal = false this.datefilter = this.currenttab this.dateselect = this.selectdate_define } else { //重新自定义日期 this.selectdate_define = [[event.detail.year, event.detail.month, event.detail.day]] style = [{month: 'current', day: new date().getdate(), color: '#fff', background: '#eb4986'}, {month: 'current', day: event.detail.day, color: '#fff', background: '#406bf8'}] this.define_days_style = style } }, next_define: function (event) { if (event.detail.currentyear == this.year && event.detail.currentmonth == this.month) this.define_days_style = [{ month: 'current', day: new date().getdate(), color: '#fff', background: '#eb4986' }] else this.define_days_style = [event.detail.year, event.detail.month, event.detail.day] }, prev_define: function (event) { this.define_days_style = [] }, }; onload() { let currentyear = new date().getfullyear() let currentmonth = new date().getmonth() + 1 for (var i = currentyear; i >= 2017; i--) { this.yeararray.push(i) } for (var i = currentmonth; i >= 1; i--) { this.currentmontharray.push(i) } let weeksarray = {} //计算2017年至今的所有周 for (var i = 0; i <= this.yeararray.length; i++) { let index = 1; let temp = [] if (i == 0) { //今年 for (let i of createweeks(this.yeararray[i])) { let start = i[0], end = i[1]; if (end <= new date().gettime() || (start <= new date().gettime() && end >= new date().gettime())) { let a = start <= new date().gettime() && end >= new date().gettime() ? '第' + formatdig(index++) + '周（' + formatdate(start) + '日-' + formatdate(end) + '日)' + ' 本周' : '第' + formatdig(index++) + '周（' + formatdate(start) + '日-' + formatdate(end) + '日)' temp.push({'weeks': a, 'select': false}) } } } else { for (let i of createweeks(this.yeararray[i])) { let start = i[0], end = i[1]; let a = '第' + formatdig(index++) + '周（' + formatdate(start) + '日-' + formatdate(end) + '日)' temp.push({'weeks': a, 'select': false}) } } if (this.yeararray[i] != undefined) { weeksarray[this.yeararray[i]] = temp.reverse(); } } this.weeksarray = weeksarray this.filterweekarray = weeksarray } } function formatdig(num) { //return num>9?''+num:'0'+num; return num; } function formatdate(mill) { var y = new date(mill); let raws = [ //y.getfullyear(), formatdig(y.getmonth() + 1), formatdig(y.getdate()), //y.getday()||7 //获取星期几 ]; //let format=['年','月','日 星期']; let format = ['月', '日']; return string.raw({raw: raws}, ...format); } function* createweeks(year) { const one_day = 24 * 3600 * 1000; let start = new date(year, 0, 1), end = new date(year, 11, 31); let firstday = start.getday() || 7, lastday = end.getday() || 7; let starttime = +start, endtime = starttime + (7 - firstday) * one_day, _endtime = end - (7 - lastday) * one_day; yield [starttime, endtime]; starttime = endtime + one_day; endtime = endtime + 7 * one_day; while (endtime < _endtime) { yield [starttime, endtime]; starttime = endtime + one_day; endtime = endtime + 7 * one_day; } yield [starttime, +end]; } array.prototype.remove = function (val) { var index = this.indexof(val); if (index > -1) { this.splice(index, 1); } };</script>
相关推荐：
微信小程序实例：自定义导航栏的实现方法
小程序实例：小程序分页加载数据的实现代码
以上就是微信小程序实例：实现自定义日期控件的代码的详细内容。