微信小程序可滑动周日历组件使用详解
微信小程序可滑动周日历组件,供大家参考,具体内容如下
为双清等地区用户提供了全套网页设计制作服务,及双清网站建设行业解决方案。主营业务为网站设计制作、网站建设、双清网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
看网上周日历组件比较少,自己弄了一个,和大家分享一下。
如果样式变形,请检查是否有共用样式起冲突
展示一下效果图
在components组件文件夹下新建calendarWeek文件夹
直接上代码吧:
index.wxml
{{dateYear}}{{dateMonth}} {{weekday}} {{day.day}}
index.wxss
/* components/calendarWeek/index.wxss */ .date-choose { background: #fff; overflow: hidden; height: auto; } .data-month { width: 100%; align-items: center; padding: .35rem .35rem; text-align: left; color: #333; font-size: 38rpx; } .date-choose-swiper { flex-grow: 1; height: 182rpx; } .swiper-item { display: flex; flex-direction: column; } .weekday, .dateday { display: flex; justify-content: space-between; align-items: center; text-align: center; flex-wrap: wrap; flex-grow: 1; } .week, .day { width: 14.286%; flex-basis: 14.286%; } .week{ color: #999; font-size: 24rpx; } .day text { position: relative; color: #333333; } .day .active:before {/* 圈圈 */ content: ""; position: absolute; width: 76rpx; height: 76rpx; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid red; border-radius: 100%; background: red; opacity: 0.1; z-index: -1; } .day text.active { color: red } .day text.reds { color: #ff0000; } /*开始*/ .headerone { width: 100%; height: auto; font-size: 24rpx; /* margin: 0 30rpx; */ } .headerone .ra { margin-right: 20rpx; } .headerone .radio-group{ margin: 20rpx 0 20rpx 30rpx; } .headertwo { width: 100%; height: auto; font-size: 24rpx; margin-top: 10rpx; margin-bottom: 26rpx; } .headertwo .le image { width: 70rpx; height: 70rpx; border-radius: 10px; margin-left: 30rpx; margin-right: 20rpx } .headertwo .ri { flex: 1; margin-right: 30rpx; border-radius: 6px; box-shadow:0px 1px 6px 0px rgba(198,198,198,0.5); } .headertwo .ri .one{ width: 100%; padding-top: 24rpx; padding-bottom :24rpx } .headertwo .ri .one view .jiao { margin: 0 16rpx; border:15rpx solid; /* margin-top: 15rpx; */ border-color: #ffffff #ffffff #b3b3b3 #ffffff; } .xi { background: red; color: #ffffff; padding:3px 10px; border-radius: 6px 0px 0 6px; } .headertwo .ri .one view view.jiaos { margin: 0 16rpx; border:15rpx solid; margin-top: 14rpx; border-color:#b3b3b3 #ffffff #ffffff #ffffff; } .headertwo .ri .two{ width: 100%; overflow: hidden; transition: all 0.5s } .headertwo .ri .two .body{ width: 100%; /* padding-left: 60rpx; */ /* padding-right: 22rpx; */ padding-top: 24rpx; padding-bottom :24rpx; }
index.js
// components/calendarWeek/index.js var utils = require('./util.js') Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { valtime: 8, dateList: [], // 日历数据数组 swiperCurrent: 0, // 日历轮播正处在哪个索引位置 dateCurrent: new Date(), // 正选择的当前日期 dateCurrentStr: '', // 正选择日期的 id dateMonth: '1月', // 正显示的月份 dateListArray: ['日', '一', '二', '三', '四', '五', '六'], }, ready: function () { var that = this; var today = utils.formatTime2(new Date()); this.setData({ today, }); var d = new Date(); this.initDate(-5, 2, d); // 日历组件程序 -4左表示过去4周 右1表示过去一周 }, /** * 组件的方法列表 */ methods: { tiaotime(e) { let data = e.detail.value.split("-") var d = new Date(Number(data[0]), Number(data[1]) - 1, Number(data[2])); this.setData({ dateList: [] }) this.initDate(-5, 2, d); // 日历组件程序 -4左表示过去4周 右1表示过去一周 }, onShow: function (e) { wx.getSystemInfo({ success: (res) => { this.setData({ windowHeight: res.windowHeight, windowWidth: res.windowWidth, }); } }); }, // 日历组件部分 // ---------------------------- initDate(left, right, d) { var month = utils.addZero(d.getMonth() + 1), year = utils.addZero(d.getFullYear()), day = utils.addZero(d.getDate()); for (var i = left; i <= right; i++) { this.updateDate(utils.DateAddDay(d, i * 7));//多少天之后的 } this.setData({ swiperCurrent: 5, dateCurrent: d, dateCurrentStr: d.getFullYear() + '-' + month + '-' + day, dateMonth: month + '月', dateYear: year + '年', dateCurrentStr: year + "-" + month + "-" + day, }); }, // 获取这周从周日到周六的日期 calculateDate(_date) { var first = utils.FirstDayInThisWeek(_date); var d = { 'month': first.getMonth() + 1, 'days': [], }; for (var i = 0; i < 7; i++) { var dd = utils.DateAddDay(first, i); var day = utils.addZero(dd.getDate()), year = utils.addZero(dd.getFullYear()), month = utils.addZero(dd.getMonth() + 1); d.days.push({ 'day': day, 'id': dd.getFullYear() + '-' + month + '-' + day, 'ids': dd.getFullYear() + ',' + month + ',' + day, }); } return d; }, // 更新日期数组数据 updateDate(_date, atBefore) { var week = this.calculateDate(_date); if (atBefore) { this.setData({ dateList: [week].concat(this.data.dateList), }); } else { this.setData({ dateList: this.data.dateList.concat(week), }); } }, // 日历组件轮播切换 dateSwiperChange(e) { const lastIndex = this.data.swiperCurrent , currentIndex = e.detail.current , dateList = this.data.dateList , dateListlen = this.data.dateList.length let flag = false , key = 'lastMonth' //判断是左划还是右 // console.log(lastIndex , currentIndex) if (lastIndex > currentIndex) { lastIndex === 7 && currentIndex === 0 ? flag = true : null } else { lastIndex === 0 && currentIndex === 7 ? null : flag = true } if (flag) { key = 'nextMonth' } if (key == 'lastMonth') { let nowindex = currentIndex - 3; let uptime = currentIndex - 4; let a = 0; if (nowindex < 0) { nowindex = nowindex + 8; a = 0 } if (uptime < 0) { uptime = uptime + 8 } let seltime = dateList[nowindex].days[a].ids var week = this.calculateDate(utils.formatTime(utils.DateAddDay(seltime, -1))); dateList[uptime] = week this.setData({ dateList: dateList }) } if (key == 'nextMonth') { let indexne = 0 let aa = 0 if (currentIndex == 7) { //要更新的下标 indexne = 0 aa = 1 } else { indexne = currentIndex + 1 aa = currentIndex + 2 } if (aa == 8) { aa = 0 } //aa 要更新的数组下标 datanex要往后查询一周的日期 let datanex = dateList[indexne].days[6].ids //获取下一周的 var week = this.calculateDate(utils.formatTime(utils.DateAddDay(datanex, 1))); dateList[aa] = week this.setData({ dateList: dateList }) } var d = this.data.dateList[currentIndex]; let da = new Date(d.days[0].ids) this.setData({ swiperCurrent: currentIndex, dateMonth: d.month + '月', dateYear: da.getFullYear()+"年" }) }, // 获得日期字符串 getDateStr: function (arg) { if (utils.type(arg) == 'array') { return arr[0] + '-' + arr[1] + '-' + arr[2] + ' 00:00:00'; } else if (utils.type(arg) == 'date') { return arg.getFullYear() + '-' + (arg.getMonth() + 1) + '-' + arg.getDate() + ' 00:00:00'; } else if (utils.type(arg) == 'object') { return arg.year + '-' + arg.month + '-' + arg.day + ' 00:00:00'; } }, // 点击日历某日 chooseDate(e) { var str = e.currentTarget.id; // console.log(str); this.setData({ dateCurrentStr: str }); this.triggerEvent('mydata', { data: str }) }, } })
要引入util.js
// 时间格式转换 yyyy/mm/dd function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') } // 时间格式转换 yyyy-mm-dd function formatTime2(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() return [year, month, day].map(formatNumber).join('-') } function formatDate(date, split) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() return [year, month, day].map(formatNumber).join(split || '') } // 两位数自动补零 function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n } // 两位数以内的数字自动补零 function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n } // 计算变化多少天后的日期 function DateAddDay(d, days) { var d = new Date(d); return new Date(d.setDate(d.getDate() + days)); } // 获得本周周日的日期 function FirstDayInThisWeek(d) { var d = new Date(d); // console.log(formatTime(DateAddDay(d, 0 - d.getDay()))); return DateAddDay(d, 0 - d.getDay()); } // 判断类型 function Type(obj) { var typeStr = Object.prototype.toString.call(obj).split(" ")[1]; return typeStr.substr(0, typeStr.length - 1).toLowerCase(); } module.exports = { formatTime: formatTime, formatDate: formatDate, formatTime2, DateAddDay: DateAddDay, FirstDayInThisWeek: FirstDayInThisWeek, type: Type, addZero: formatNumber, }
调用组件
//json文件调用 "usingComponents": { "calendarMonth": "../../components/calendarWeek/index" }
页面调用组件
//mydata触发的点击日期时触发的事件 可获取当前点击的日期
当前页面js
//js里的事件 mydata(e){ //可获取日历点击事件 let data = e.detail.data console.log(data) }
更多精彩的日历效果请学习参考专题:javascript日历插件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网页名称:微信小程序可滑动周日历组件使用详解
分享网址:http://pwwzsj.com/article/pgsdpi.html