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

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

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

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

展示一下效果图

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

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• 微信小程序日历弹窗选择器代码实例
• 微信小程序自定义带价格显示日历效果
• 微信小程序日历效果
• 微信小程序日历组件使用方法详解
• 微信小程序自定义可滑动日历界面
• 微信小程序实现日历效果
• 微信小程序日历/日期选择插件使用方法详解
• 微信小程序实现日历功能
• 微信小程序实现打卡日历功能
• 微信小程序日历组件calendar详解及实例
• 微信小程序可滑动月日历组件使用详解