本文共 5066 字，大约阅读时间需要 16 分钟。

在小程序里用swiper做了一个月份日历，先上图叭直接贴代码叭：

     
                
                     
                      {
  {month}}月, {
  {year}}年                
                  
                 
                     
      
                    
       
日
                    
       
一
                    
       
二
                    
       
三
                    
       
四
                    
       
五
                    
       
六
                
      
                
                          
                               
        
 
         
 
           
           
            { { d.day}}
            
            
           
 
        
                    
                       
                  
                         
    
   

css

.calendar {
    	width: 100%;	padding: 37rpx 33rpx 27rpx 33rpx;}.calendar-head {
    	position: relative; 	padding:8rpx 16rpx;	font-size: 36rpx;	font-weight: 500;	line-height: 50rpx;	color: #000;	text-align: center;    display: flex;    justify-content: space-between;    align-items: center;}.calendar-head .icon {
    	position: absolute; 	display:inline-block; 	width:20rpx;}.calendar-head image {
   	width: 30rpx;	height: 30rpx;}.calendar-head image:nth-child(1){
   	transform: rotate(180deg);}.weeks {
    	display: flex; 	justify-content: center; 	padding:16rpx 0;}.weeks li {
    	display: inline-flex; 	width:14.2857%;	justify-content: center; 	font-size: 24rpx;}.weeks .weekend {
    	color:#ffaa71}.days {
    	flex-direction: row; 	flex-wrap: wrap; 	width: 100%;	justify-content: space-between;	height: 500rpx !important;}.days li {
    	float: left;	display: flex;	justify-content: center;	align-items: center;	flex: 1;	box-sizing: border-box; 	width: 14.2857%;	min-width: 14.2857%;	max-width: 14.2857%;	height: 80rpx;   	color: #161616;}.day_date {
    	width: 81rpx;	height: 81rpx;	line-height: 42rpx;	font-size: 30rpx;	font-weight: 500;	text-align: center;	border-radius: 50%;	position: relative;}.day_date text {
   	display: inline-block;	margin-top: 15rpx;}.days .gray {
    	color: darkgray;}.now_bgk {
   	background: rgba(0, 137, 255, .1);}.circle {
   	position: absolute;	top: 61rpx;    left: 50%;    margin-left: -6rpx;	width: 12rpx;	height: 12rpx;	border-radius: 24rpx;	background: #0089FF;}.circle-punch {
   	position: absolute;	top: 44rpx;	left: 26rpx;	width: 10rpx;	height: 10rpx;	border-radius: 20rpx;	background: #0089FF;}.is_bgk {
   	background: #0089FF !important;	color: #fff !important;}.is_bgk .circle {
   	background: #fff !important;}.current {
    	background-image: linear-gradient(-45deg, #3857e3, #567bfd);	color: #fff;	font-weight: bold;}.swiper {
    	height: 960rpx;}

const dayjs = require("../../utils/dayjs");Page({
     data: {
   		index: 0, // 初次渲染使用monthList[0]		sign: null,		currentDate: '',		now: dayjs().format('YYYY-MM-DD'),		month: '',		year: '',		monthList: [], // 包含3个元素的数组		days: [],		checkDate: '',		monthCheck: '',		yearCheck: '',  },  onReady: function(){
       this.init();  },  onLoad: function () {
         },	swiperMonth(e) {
   		let sign = e.currentTarget.dataset.sign;		let {
    index } = this.data;		let cur_index;			if (sign == -1) {
   			cur_index = index - 1 < 0 ? 2 : index - 1		}else {
   			cur_index = index + 1 > 2 ? 0 : index + 1		}		this.setData({
   			sign,			index: cur_index,		})	},		change(e) {
   		let current = e.detail.current;		let source = e.detail.source;		let {
    index, currentDate, monthList } = this.data;			// 判断左右滑动方向，修改month		let flag = null;		if(!source){
   			flag = this.data.sign;		}else {
   			flag = current - index == -2 || current - index == 1 ? 1 : -1;		}			currentDate = currentDate.add(flag, 'month')				this.setData({
   			currentDate,			year: currentDate.year(),			month: currentDate.month() + 1,			day: currentDate.date(),			index: current		})				// 滑动后current值，有3种情况需要处理		if (current == 0)			monthList = [this.getMonth(0), this.getMonth(1), this.getMonth(-1)]			if (current == 1)			monthList = [this.getMonth(-1), this.getMonth(0), this.getMonth(1)]			if (current == 2)			monthList = [this.getMonth(1), this.getMonth(-1), this.getMonth(0)]			this.setData({
   			monthList		})		},		init() {
   		// 初始化 日期为今天		this.setData({
   			currentDate: dayjs(),			checkDate: dayjs(),		}) 			this.setData({
        			year: dayjs().year(),			month: dayjs().month() + 1,			day: dayjs().date(),			monthList: [this.getMonth(0, 1), this.getMonth(1), this.getMonth(-1)],				monthCheck: dayjs().month() + 1,			yearCheck: dayjs().year(),		})	},			getMonth(index) {
   		let {
   			currentDate,			year,			month,			day		} = this.data			year = currentDate.year()		month = currentDate.month() + 1 + index;		day = currentDate.date()			let first = dayjs(new Date(year, month - 1, 1))		let arrDays = []		let preDays = first.day() == 0 ? 7 : first.day();				for (let i = 0 - preDays; i < 42 - preDays; i++) {
   			let preDate = first.add(i, 'day');			let d = preDate.format('YYYY-MM-DD');				arrDays.push({
   				date: d,				day: preDate.format('D'),				month: preDate.format('M')			})		}			return {
   			m: arrDays		}  },	getDateDetail(e) {
   		console.log(e.currentTarget.dataset);	},})

转载地址：http://onzsi.baihongyu.com/