最初のレンダリング：
wxml：
<!-- 日历 -->
<view class='calendar'>
<!-- 顶部年月 + 切换 -->
<view class="month ">
<view class="calendar_flex ">
<view class="icon flex_center" catchtap="minusMouth">
<image src="/image/left_icon.png" mode="widthFix" lazy-load="true"></image>
</view>
<view class="icon flex_center" catchtap="minusMouth">
<image src="/image/left_2.png" mode="widthFix" lazy-load="true" ></image>
</view>
</view>
<view>{
{year}}-{
{mouth}}</view>
<view class="calendar_flex icon_right">
<view class="icon flex_center" catchtap="addMouth">
<image src="/image/left_2.png" mode="widthFix" lazy-load="true" ></image>
</view>
<view class="icon flex_center" catchtap="addMouth">
<image src="/image/left_icon.png" mode="widthFix" lazy-load="true"></image>
</view>
</view>
</view>
<!-- 周 -->
<view class="calendar_week">
<block wx:for='{
{week}}' wx:key=''>
<view class="calendar_week_li">{
{item}}</view>
</block>
</view>
<!-- 日 -->
<view class="calendar_day">
<!-- <view style="margin: auto;"> -->
<block wx:for='{
{days}}' wx:key=''>
<view class='calendar_day_li {
{item.index == 0 ? "opacity": ""}} {
{item.checked ? "active" : ""}} {
{item.noneChecked ? "none" : ""}} {
{today == item.index ? "today" : ""}}' catchtap="toDay" data-index="{
{item.index}}">{
{item.index}}</view>
</block>
</view>
<!-- </view> -->
</view>
wxss：
@import '/app.wxss';
.scroll{white-space: nowrap;background: #232730;width: 100%;display: flex;}
.scroll_li{display: inline-block;margin: 0 30rpx;padding: 24rpx 30rpx;box-sizing: border-box;}
.scroll_li.active{color: #FC3E5A;position: relative;}
.scroll_li.active::after{position: absolute;bottom: 0;left: 50%;width: 100rpx;margin-left: -50rpx;height: 6rpx;border-radius: 6rpx;background: #FC3E5A;content: '';}
/* 日历 */
.calendar{width: 100vw;padding: 10rpx 0;box-sizing: border-box;}
.calendar image{width: 40rpx;}
.calendar .icon{padding: 20rpx 10rpx;box-sizing: border-box;}
.calendar .month{padding: 0 25rpx;box-sizing: border-box;width: 100%;display: flex;justify-content: space-between;align-items: center;font-size: 32rpx;}
.calendar .icon_right image{transform: rotate(180deg);}
/* 周 */
.calendar_week{padding: 0 30rpx;box-sizing: border-box;}
.calendar_week_li{width: calc((100vw - 60rpx - 66rpx) / 7);height: 70rpx;text-align: center;line-height: 70rpx;border: 2rpx solid transparent;margin-bottom: 11rpx;margin-right: 11rpx;display: inline-block;box-sizing: border-box;font-size: 30rpx;}
.calendar_week_li:last-child{margin-right: 0;color: #FCCE00;}
.calendar_week_li:first-child{color: #FCCE00;}
/* 日 */
.calendar_day{box-sizing: border-box;margin: auto;width: calc(100vw - 60rpx);}
.calendar_day_li{width: calc((100vw - 60rpx - 66rpx) / 7);height: calc((100vw - 60rpx - 66rpx) / 7);text-align: center;line-height: calc((100vw - 60rpx - 66rpx) / 7);border: 2rpx solid transparent;margin-bottom: 11rpx;margin-right: 11rpx;display: inline-block;box-sizing: border-box;border-radius: 4rpx;position: relative;font-size: 32rpx;}
.calendar_day_li text{position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
.calendar_day_li:nth-child(7n){margin-right: 0;}
.calendar_day_li.today{border: 2rpx solid transparent;color: #FC3E5A;}
.calendar_day_li.active{background: #FC3E5A;color: #fff;border: 2rpx solid #FC3E5A;}
.calendar_day_li.none{border: 2rpx solid transparent;background: transparent;color: #3C414E;}
.calendar_day_li.opacity{opacity: 0;}
.calendar_flex{display: flex;}
js：
Component({
/**
* 组件的属性列表
*/
properties: {
newDay: {
type: Array,
value: '',
observer: function (newVal, oldVal, changedPath) {
// 将日期传入页面
this.dataData()
// 初始化有选中样式
this.cheched()
// 给当日日期添加特殊样式
this.taday_()
}
},
},
/**
* 组件的初始数据
*/
data: {
year: '', //年
mouth: '', //月
today: '', //日
week: ['日', '一', '二', '三', '四', '五', '六'], //周
days: [], //日期数据
},
/**
* 组件的方法列表
*/
methods: {
// 获取时间
dataData: function () {
let time = new Date();
let year = time.getFullYear();
let mouth = time.getMonth() + 1
this.updateDays(year, mouth)
},
//时间调用方法
updateDays: function (year, mouth) {
let days = [];
let dateDay = '';
let dateWeek = '';
let today = this.data.today;
// 根据日期获取每个月有多少天 例如：new Date(2019, 7, 0).getDate(); 最后一个参数默认为日，当写为0时，代表获取上个月的最后一天，所以月份不用减一
var getDateDay = function (year, mouth) {
return new Date(year, mouth, 0).getDate();
}
//根据日期 获取当月的1号是周几
var getDateWeek = function (year, mouth) {
return new Date(year, mouth - 1, 1).getDay();
}
dateDay = getDateDay(year, mouth)
dateWeek = getDateWeek(year, mouth)
// console.log(dateDay);
// console.log(dateWeek);
//向数组中添加天
for (let index = 1; index <= dateDay; index++) {
let a = {
checked: false,
noneChecked: false,
index: index
};
days.push(a)
}
// console.log(days)
//向数组中添加一号之前应该空出的空格
for (let index = 1; index <= dateWeek; index++) {
let a = {
checked: false,
noneChecked: false,
index: 0
};
days.unshift(a)
}
// console.log(new Date())
this.setData({
days: days,
year: year,
mouth: mouth,
})
},
// 初始化有选中效果
cheched: function () {
let year = this.data.year;
let mouth = this.data.mouth;
let newDay = this.data.newDay
let days = this.data.days
// console.log(newDay)
for (var i = 1; i < days.length; i++) {
let a = year + '-' + mouth + '-' + days[i]['index']
days[i]['checked'] = this.inArray(newDay, a)
}
this.setData({
days: days
})
},
// 我也不知道这是干啥的
inArray: function (arr = [], val = '') {
for (let k in arr) {
if (val == arr[k]) {
return true;
}
}
return false;
},
//点击减小月份
minusMouth: function () {
let time = new Date();
let year = this.data.year;
let mouth = this.data.mouth;
let year_ = time.getFullYear()
let mouth_ = time.getMonth() + 1
console.log(year)
console.log(year_)
// mouth--
if (year_ == year) {
if (mouth_ < mouth) {
mouth--
}
}else{
mouth--
}
if (mouth < 1) {
mouth = 12
year--
}
this.setData({
year: year,
mouth: mouth
})
this.updateDays(year, mouth)
this.cheched()
this.taday_()
},
//点击增加月份
addMouth: function () {
let time = new Date();
let year = this.data.year;
let mouth = this.data.mouth;
// let mouth_ = time.getMonth() + 1
// console.log(mouth_)
mouth++
if (mouth > 12) {
mouth = 1
year++
}
this.setData({
year: year,
mouth: mouth
})
this.updateDays(year, mouth)
this.cheched()
this.taday_()
},
// 点击减小年份
minusYear: function () {
let year = this.data.year;
let mouth = this.data.mouth;
year--
this.setData({
year: year
})
this.updateDays(year, mouth)
this.cheched()
this.taday_()
},
// 点击增加年份
addYear: function () {
let year = this.data.year;
let mouth = this.data.mouth;
year++
this.setData({
year: year
})
this.updateDays(year, mouth)
this.cheched()
this.taday_()
},
// 选择月份
toChoose: function (e) {
let that = this
let year = e.currentTarget.dataset.year
let mouth = e.currentTarget.dataset.mouth
console.log(mouth)
if (mouth > 12) {
mouth = 1
year++
}
this.setData({
year: year,
mouth: mouth
})
this.updateDays(year, mouth)
// this.cheched()
this.taday_()
},
// 点击选中事件
toDay: function (e) {
let year = this.data.year;
let mouth = this.data.mouth;
let item = e.currentTarget.dataset.index
let newDay = this.data.newDay
let days = this.data.days
let today = this.data.today
if (item < today) {
// wx.showToast({
// title: '请选择正确的日期',
// icon: 'none'
// })
return
}
// 判断当数组中添加的‘0’超过1个时，将item增加几个字符
let num_ = 0
for (var i = 1; i < days.length; i++) {
if (days[i].index == 0) {
num_++
}
}
// 当1号为第一天时，数组中不存在‘0’时，需要将item减一，否则点击效果会往后移动一位
if (days[0].index == 1) {
num_--
}
// console.log(num_)
// 重新定义item
item += num_
days[item].checked = !days[item].checked
newDay[0] = year + '-' + mouth + '-' + days[item].index
for (var i = 0; i < days.length; i++) {
if (newDay[0] != year + '-' + mouth + '-' + days[i].index) {
days[i].checked = false
}
}
console.log(newDay)
// console.log(item)
this.setData({
newDay: newDay,
days: days
})
},
// 获取今日日期，使当天日期有单独样式
taday_: function () {
let time = new Date();
let year = this.data.year
let mouth = this.data.mouth
let today = this.data.today
let days = this.data.days
let mouth_ = time.getMonth() + 1
today = time.getDate()
if (mouth == mouth_) {
for (var i = 0; i < days.length; i++) {
if (days[i].index < today) {
days[i].noneChecked = true
}
}
}
// console.log(days)
if (year == time.getFullYear() && mouth == time.getMonth() + 1) {
today = today
} else {
today = 0
}
this.setData({
today: today,
days: days
})
},
}
})