微信小程序可滑动周日历组件使用详解


Posted in Javascript onOctober 21, 2019

微信小程序可滑动周日历组件,供大家参考,具体内容如下

看网上周日历组件比较少,自己弄了一个,和大家分享一下。

如果样式变形,请检查是否有共用样式起冲突

展示一下效果图

微信小程序可滑动周日历组件使用详解

在components组件文件夹下新建calendarWeek文件夹

直接上代码吧:

index.wxml

<!--components/calendarWeek/index.wxml-->
<!-- 日历 -->
<view class="date-choose shrink border-bottom10">

 <picker mode="date" bindchange="tiaotime"><view class="data-month">{{dateYear}}{{dateMonth}}</view></picker>
 <swiper class="date-choose-swiper" circular="true" indicator-dots="{{false}}" current="{{swiperCurrent}}" bindchange="dateSwiperChange">
 <block wx:for="{{dateList}}" wx:for-item="date" wx:key="date.id">
 <swiper-item class="swiper-item">
 <view class="weekday">
 <block wx:for-item="weekday" wx:for="{{dateListArray}}" wx:key="{{index}}">
 <text class="week">{{weekday}}</text>
 </block>
 </view>
 <view class="dateday">
 <block wx:for="{{date.days}}" wx:for-item="day" wx:key="{{day.id}}">
 <!-- <view>{{day.ids}}</view> -->
 <view class="day" id="{{day.id}}" bindtap="chooseDate" >
 <text class="{{dateCurrentStr==day.id?'active':''}}{{today==day.id?' reds':''}}" >{{day.day}}</text>
 </view>
 </block>
 </view>
 </swiper-item>
 </block>
 </swiper>
</view>
<!-- 日历 -->

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触发的点击日期时触发的事件 可获取当前点击的日期
 <calendarMonth bindmydata="mydata"></calendarMonth>

当前页面js

//js里的事件
 mydata(e){ //可获取日历点击事件
 let data = e.detail.data
 console.log(data)
}

更多精彩的日历效果请学习参考专题:javascript日历插件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
js本地图片预览实现代码
Oct 09 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
js中开关变量使用实例
Feb 24 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
小程序实现横向滑动日历效果
Oct 21 #Javascript
微信小程序实现点击图片放大预览
Oct 21 #Javascript
vue实现Input输入框模糊查询方法
Jan 29 #Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 #Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 #Javascript
vue.js实现左边导航切换右边内容
Oct 21 #Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 #Javascript
You might like
PHP 高手之路(一)
2006/10/09 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python中atexit模块的基本使用示例
2015/07/08 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Python中itertools的用法详解
2020/02/07 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Python-split()函数实例用法讲解
2020/12/18 Python
找工作最新求职信
2013/12/22 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
个人借款协议书范本
2014/11/17 职场文书
小学生读书笔记
2015/07/01 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书