html部分（上一月下一月切換圖標(biāo)最好使用icon，本文為了方便使用img）
<view class="common_header">
? ? <image bindtap="preMonth" src="{{CdnUrl}}arrow_left_b20190821.png" class="go_back pre_month"></image>
? ? <text>{{choosedMonth}}月</text>
? ? <image bindtap="nextMonth" src="{{CdnUrl}}arrow_right_b20190821.png" class="next_month"></image>
</view>
<view style="height: 80rpx;"></view>
<view class="calendar">
? <view class="calendar_week">
? ? <view wx:for="{{weekArr}}" wx:key="*this">{{item}}</view>
? </view>
? <view style="clear: both"></view>
? <view class="calendar_date">
? ? <view wx:for="{{dateList}}" class="{{chooseIndex == index ? 'bag' : ''}}" wx:key="*this" style="{{item ? '' : 'visibility: hidden'}}">{{item}}</view>
? </view>
? <view style="clear: both"></view>
</view>
js部分
/**
? * 頁(yè)面的初始數(shù)據(jù)
? */
? data: {
? ? CdnUrl: wx.getStorageSync('CdnUrl'),
? ? weekArr: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'],
? ? choosedMonth: "", //日歷展示的月份
? ? choosedYear: '',// 日歷展示的年份
? ? curDay: '', //當(dāng)前日期
? ? dataMonth: '',
? ? dataYear: '' //當(dāng)前年份
? },
calendar: function () {
????// 先處理當(dāng)前日期
? ? var curDate = new Date();
? ? var unixTimeString = curDate.getTime();
? ? var curDay = curDate.getDate();//日 (當(dāng)前日期--當(dāng)月幾號(hào))
? ? var curWeek = curDate.getDay();//周，0~6 （當(dāng)前日在當(dāng)月第幾周）
? ? var curMonth = curDate.getMonth();//月，0~11
? ? var curYear = curDate.getFullYear();//今年 （當(dāng)前年份）
? ? this.setData({
? ? ? choosedMonth: curMonth + 1,
? ? ? choosedYear: curYear,
? ? ? curDay: curDay,
? ? ? dataMonth: curMonth + 1,
? ? ? dataYear: curYear
? ? })
? ? this.setWeekTable(this.data.choosedYear, this.data.choosedMonth);
? },
? /**
? * 上一月
? */
? preMonth: function () {
? ? if (this.data.choosedMonth == 1) {
? ? ? this.setData({
? ? ? ? choosedYear: this.data.choosedYear - 1,
? ? ? ? choosedMonth: 12
? ? ? })
? ? } else {
? ? ? this.setData({
? ? ? ? choosedYear: this.data.choosedYear,
? ? ? ? choosedMonth: this.data.choosedMonth - 1
? ? ? })
? ? }
? ? this.setWeekTable(this.data.choosedYear, this.data.choosedMonth);
? },
? /**
? * 下一月
? */
? nextMonth: function () {
? ? if (this.data.choosedMonth == 12) {
? ? ? this.setData({
? ? ? ? choosedYear: this.data.choosedYear + 1,
? ? ? ? choosedMonth: 1
? ? ? })
? ? } else {
? ? ? this.setData({
? ? ? ? choosedYear: this.data.choosedYear,
? ? ? ? choosedMonth: this.data.choosedMonth + 1
? ? ? })
? ? }
? ? this.setWeekTable(this.data.choosedYear, this.data.choosedMonth);
? },
? /**
? * 頂部上一月下一月切換時(shí)的日歷展示
? */
? setWeekTable: function (choosedYear, choosedMonth) {
? ? var d = new Date();
? ? d.setYear(choosedYear);
? ? d.setMonth(choosedMonth);
? ? d.setDate(0);
? ? var totalDay = d.getDate()//獲取當(dāng)月天數(shù)
? ? d = new Date(d.setDate(1));
? ? var weekday = d.getDay();//當(dāng)前月第一天星期幾:
? ? switch (weekday) {
? ? ? case 0:
? ? ? ? this.setData({
? ? ? ? ? dateList: [],
? ? ? ? ? chooseIndex: this.data.curDay - 1
? ? ? ? })
? ? ? ? break;
? ? ? case 1:
? ? ? ? this.setData({
? ? ? ? ? dateList: [''],
? ? ? ? ? chooseIndex: this.data.curDay
? ? ? ? })
? ? ? ? break;
? ? ? case 2:
? ? ? ? this.setData({
? ? ? ? ? dateList: ['', ''],
? ? ? ? ? chooseIndex: this.data.curDay + 1
? ? ? ? })
? ? ? ? break;
? ? ? case 3:
? ? ? ? this.setData({
? ? ? ? ? dateList: ['', '', ''],
? ? ? ? ? chooseIndex: this.data.curDay + 2
? ? ? ? })
? ? ? ? break;
? ? ? case 4:
? ? ? ? this.setData({
? ? ? ? ? dateList: ['', '', '', ''],
? ? ? ? ? chooseIndex: this.data.curDay + 3
? ? ? ? })
? ? ? ? break;
? ? ? case 5:
? ? ? ? this.setData({
? ? ? ? ? dateList: ['', '', '', '', ''],
? ? ? ? ? chooseIndex: this.data.curDay + 4
? ? ? ? })
? ? ? ? break;
? ? ? case 6:
? ? ? ? this.setData({
? ? ? ? ? dateList: ['', '', '', '', '', ''],
? ? ? ? ? chooseIndex: this.data.curDay + 5
? ? ? ? })
? ? ? ? break;
? ? }
? ? let tempList = []
? ? for (let i = 1; i <= totalDay; i++) {
? ? ? this.data.dateList.push(i)
? ? }
? ? this.setData({
? ? ? dateList: this.data.dateList
? ? })
? },
/**
? * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? */
? onShow: function () {
? ? this.calendar()
? },
css部分
.common_header{
? height: 80rpx;
? line-height: 80rpx;
? color: #101010;
? font-size: 32rpx;
? text-align: center;
? border-bottom: 2rpx solid #e4e4e4;
? background-color: #fff;
? position: fixed;
? top: 0;
? width: 100%;
? z-index: 10;
}
.common_header .go_back{
? float: left;
? width: 28rpx;
? height: 28rpx;
? margin-top: 30rpx;
? margin-left: 20rpx;
}
.common_header .next_month{
? float: right;
? width: 28rpx;
? height: 28rpx;
? margin-top: 30rpx;
? margin-right: 20rpx;
}
.calendar .calendar_week{
? display: flex;
? justify-content: space-around;
? font-size: 30rpx;
? text-align: center;
? line-height: 70rpx;
}
.calendar .calendar_week view{
? line-height: 70rpx;
? color: #c19a61;
? width: 14.28%
}
.calendar_date{
? font-size: 30rpx;
? text-align: center;
? line-height: 70rpx;
}
.calendar_date view{
? float: left;
? line-height: 70rpx;
? /* color: #333; */
? width: 14.28%;
? height: 70rpx;
}
.bag{
? background-color: #ff2741;
? color: #fff;
}
