1.new Date().toLocaleDateString(), //获取当前的时间(年月日)
2. new Date().getFullYear() //获取年
new Date().getMonth() + 1, //获取月份
new Date().getDate(), //获取日期
3.this.getThisMonthDays(year, month) //获取当月天数
4.this.getLastMonthDays(year, month) //绘制上个月天数
this.getNowMonthDays(year, month) //绘制当月天数文章来源:https://www.toymoban.com/news/detail-585337.html
this.getNextMonthDays(year, month) //绘制下个月文章来源地址https://www.toymoban.com/news/detail-585337.html
<view class="container">
<view class="calendar-container">
<!-- 年月的显示 -->
<view class="calendar-container-header">
<view class="date-text">{{year}}年{{month}}月</view>
<view class="btn-box">
<view class="btn preBtn" bindtap="changeMonth" data-type="pre"></view>
<view class="btn nextBtn" bindtap="changeMonth" data-type="next"></view>
</view>
</view>
<!-- 日期的显示 -->
<view class="calendar-container-body">
<!-- 显示星期 -->
<view class="calendar-week">
<view class="calendar-week-item" wx:for="{{weeksArr}}" wx:key="index">{{item}}</view>
</view>
<!-- 显示日期 -->
<view class="calendar-days">
<!-- 上个月的日期 -->
<view class="days-item last-days-item {{item.isNowMonthDay}}" wx:for='{{lastMonthDays}}' wx:key='item' bindtap="selectDate" data-time="{{item.time}}" data-type="lastMonthDays" data-index="{{index}}">{{item.date}}</view>
<!--当月的日期-->
<view class="days-item {{item.isNowMonthDay}}" wx:for='{{nowMonthDays}}' wx:key='index' bindtap="selectDate" data-item="{{item}}" data-type="nowMonthDays" data-index="{{index}}">
{{item.date}}
</view>
<!--下个月的日期-->
<view class="days-item next-days-item {{item.isNowMonthDay}}" wx:for='{{nextMonthDays}}' wx:key='item' bindtap="selectDate" data-item="{{item}}" data-type="nextMonthDays" data-index="{{index}}">{{item.date}}</view>
</view>
</view>
</view>
</view>
.container{
padding: 32rpx;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
/* 日历容器的样式 */
.calendar-container{
width: 100%;
/* height: 800rpx; */
border-radius: 24rpx;
background-color: #ffffff;
box-sizing: border-box;
}
/* 日历容器的头部样式 */
.calendar-container .calendar-container-header{
padding: 24rpx 24rpx 16rpx;
width: 100%;
border-bottom: 2rpx solid #cccccc;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.calendar-container-header .date-text{
font-weight: 700;
}
/* 切换月份按钮的样式 */
.calendar-container-header .btn-box {
width: 130rpx;
height: 40rpx;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.calendar-container-header .btn-box .btn {
width: 40rpx;
height: 40rpx;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
border-radius: 50%;
background-image: url(https://aalq.oss-cn-hangzhou.aliyuncs.com/basketball/arrow-down.png);
}
.calendar-container-header .btn-box .btn.preBtn {
transform: rotate(90deg);
}
.calendar-container-header .btn-box .btn.nextBtn {
transform: rotate(-90deg);
}
/* 日期的显示样式 */
.calendar-container-body {
margin-top: 16rpx;
padding-bottom: 64rpx;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.calendar-container-body .calendar-week {
display: flex;
box-sizing: border-box;
}
.calendar-week .calendar-week-item {
width: calc(686rpx / 7);
text-align: center;
font-size: 32rpx;
font-weight: 700;
box-sizing: border-box;
}
/* 日期 */
.calendar-days {
display: flex;
flex-wrap: wrap;
font-size: 28rpx;
font-weight: 700;
box-sizing: border-box;
}
.calendar-days .days-item {
width: calc(686rpx / 7);
height: 68rpx;
text-align: center;
line-height: 68rpx;
box-sizing: border-box;
}
.calendar-days .days-item.isNowMonthDay{
border-radius: 68rpx;
background-color: #28EFD2;
color: #ffffff;
}
.calendar-days .days-item.isNotNowMonthDay{
border-radius: 68rpx;
background-color: #cccccc;
color: #ffffff;
}
.calendar-days .days-item.isActive{
position: relative;
}
.calendar-days .days-item.isActive::after{
display: block;
content: '';
border:10rpx solid #28EFD2 ;
border-top:10rpx solid transparent ;
border-left: 10rpx solid transparent;
position: absolute;
right: 0;
bottom: 0;
}
.calendar-days .days-item.last-days-item,
.calendar-days .days-item.next-days-item {
color: #ccc;
}
Page({
data: {
// 本月指的是选择的当前月份
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
nowMonth: new Date().getMonth() + 1, //本月是几月
nowDay: new Date().getDate(), //本月当天的日期
weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
lastMonthDays: [], //上一个月
nowMonthDays: [], //本月
nextMonthDays: [], //下一个月
timeDate: new Date().toLocaleDateString(), //当前时间
lastType: "nowMonthDays", //上一次选中的时间类型,默认为本月
},
onShow() {
let {
year,
month
} = this.data
this.createDays(year, month)
},
//创建时间
createDays(year, month) {
this.getLastMonthDays(year, month)
this.getNowMonthDays(year, month)
this.getNextMonthDays(year, month)
},
//获取当月天数
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
},
//绘制上个月天数
getLastMonthDays(year, month) {
let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
let lastMonthDays = []
if (nowMonthFirstDays) { //判断当月的第一天是不是星期天
//上个月显示多少天
let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判断是否会跨年
//上个月从几号开始显示
for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
let time = new Date(year, month - 2, i).toLocaleDateString() //对应的时间
lastMonthDays.push({
date: i, //几号
week: this.data.weeksArr[new Date(year, month - 2, i).getDay()], //星期几
time,
isNowMonthDay: ''
});
}
}
this.setData({
lastMonthDays
})
},
//绘制当月天数
getNowMonthDays(year, month) {
let {
nowMonth,
nowDay
} = this.data
let nowMonthDays = []
let days = this.getThisMonthDays(year, month); //获取当月的天数
for (let i = 1; i <= days; i++) {
let time = new Date(year, month - 1, i).toLocaleDateString()
nowMonthDays.push({
date: i, //几号
week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
time,
isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : (i == nowDay) ? "isNotNowMonthDay" : ""
});
}
this.setData({
nowMonthDays
})
},
//绘制下个月
getNextMonthDays(year, month) {
let {
lastMonthDays,
nowMonthDays,
} = this.data
let nextMonthDays = []
let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下个月显示多少天
let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一个月的年份
let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一个月的月份
if (nextMonthNums) { //判断当前天数是否大于零
for (let i = 1; i <= nextMonthNums; i++) {
let time = new Date(year, month - 1, i).toLocaleDateString()
nextMonthDays.push({
date: i, //几号
week: this.data.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期几
time,
isNowMonthDay: ''
});
}
}
this.setData({
nextMonthDays
})
// console.log(nextMonthDays)
},
//切换月份
changeMonth(e) {
let {
year,
month
} = this.data
let type = e.currentTarget.dataset.type //类型
if (type == 'pre') { //上一个月
year = month - 1 > 0 ? year : year - 1
month = month - 1 > 0 ? month - 1 : 12
} else { //next 下个月
year = (parseInt(month) + 1) > 12 ? year + 1 : year
month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
}
this.setData({
year,
month,
lastType: "nowMonthDays", //切换月份,时间类型默认为本月
})
this.createDays(year, month)
},
//选择时间
selectDate(e) {
let type = e.currentTarget.dataset.type //选择的时间类型
let index = e.currentTarget.dataset.index //选择的下标
// console.log("选择的时间",type,index)
let {
lastType
} = this.data
//将上一次选择的时间类型的 isNowMonthDay 全改为''
this.data[lastType]?.forEach(item => {
item.isNowMonthDay = ''
})
this.data[type]?.forEach((item, idx) => {
if (index == idx) {
item.isNowMonthDay = (item.time == new Date().toLocaleDateString() ? "isNowMonthDay" : "isNotNowMonthDay"); //判断当前选中的日期是否是当前时间
} else {
item.isNowMonthDay = ''
}
})
this.setData({
[lastType]: this.data[lastType],
[type]: this.data[type],
lastType: type
})
}
})
到了这里,关于微信小程序开发——日历实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!