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

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

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

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

展示一下效果图

在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日历插件

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