微信小程序里实现自定义日期控件

最近在研究微信小程序，需要实现一个自定义日期的功能，类似于猫眼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.keythis.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 = stylethis.selectDate = [event.detail.year, event.detail.month, event.detail.day]this.openDateModal = falsethis.dateFilter = this.currentTabthis.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].selectif (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 {   //假  pushthis.selectWeekArray[this.weeksYears].push(weekIndex)this.selectWeekArray[this.weeksYears].sort()}} else {let temp = {}temp[this.weeksYears] = []let a = [weekIndex]temp[this.weeksYears] = athis.selectWeekArray = temp}this.filterWeekSelect = this.selectWeekArray  //回调到父级页面},changeMonthYear(year) {this.monthYear = year},handleMonthChange(month) {this.selectMonth = monththis.openDateModal = falsethis.dateFilter = this.currentTabthis.dateSelect = [this.monthYear, this.selectMonth]},handleYearChange(year) {this.selectYear = yearthis.openDateModal = falsethis.dateFilter = this.currentTabthis.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 = falsethis.dateFilter = this.currentTabthis.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() + 1for (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 = weeksArraythis.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>

微信小程序里实现自定义日期控件相关推荐

微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
微信个人中心 html,微信小程序个人中心的列表控件实现代码
个人中心的列表控件首先来看效果图 wxml 我的收藏 wxss .list-item { display: flex; flex-direction: row; align-items: cente ...
微信小程序原声自定义日期选择器
date.wxml <view><view class="table-container"><!-- 年份 ...
微信小程序 - 页面背景音乐播放器控件（音乐盒图标旋转 360° 动画且可点击暂停与播放）
前言因为无法插入视频,您所看到的是效果图(实则控制音乐),运行起来有背景音乐. 默认直接播放音乐,用户可点击暂停与继续播放, 除了基础功能,也做好了播放.暂停.出错等监听,由您根据业务进行扩展. ...
微信小程序，时间戳和日期格式互相转化
微信小程序,时间戳转为日期格式通常后台传递过来的都是时间戳,但是前台展示不能展示时间戳.就需要转化了. 功能说明: 微信小程序里,时间戳转化为日期格式,支持自定义. 拷贝至项目utils/utils ...
微信小程序中时间戳和日期的相互转换
在微信开发小程序时,后台传入的诗句可能是时间戳而不是日期或者需要把日期转换成时间戳来做出相应的处理时我们将用到时间戳和日期的相互转换微信小程序里,时间戳转化为日期格式,支持自定义. 拷贝至项 ...
微信小程序，时间戳转为日期格式
//数据转化 function formatNumber(n) {n = n.toString()return n[1] ? n : '0' + n }/*** 时间戳转化为年月日时分秒* ...
微信小程序之callout自定义气泡
最近闲着踩踩地图的坑,一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了微信小程序里面地图callout 这个属性 callout呢,是在标记的点上面显示一个气泡,作为提示用最后展示下效果 ...
微信小程序用vant自定义tabbar页面并跳转相应页面
0.前置安装步骤一安装 vant 组件库 npm i @vant/weapp -S --production 下载完后要npm构建才能使用步骤二修改 app.json 将 app.json 中 ...
微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

微信小程序里实现自定义日期控件

微信小程序里实现自定义日期控件相关推荐

最新文章

热门文章