vue日期组件

 直接放代码

<template>
	<div class="com-date">
		<div id="calendar" :class="className">
			<!-- 年份 月份 -->
			<div class="month">
				<ul>
					<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
					<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮
					</li>
					<li class="year-month"
						@click="pickYear(currentYear,currentMonth)">
						<span class="choose-year">{{ currentYear }}年</span>
						<span class="choose-month">{{ currentMonth }}月</span>
					</li>
					<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯
					</li>
				</ul>
			</div>
			<!-- 星期 -->
			<ul class="weekdays">
				<li style="color:red">日</li>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li style="color:red">六</li>
			</ul>
			<!-- 日期 -->
			<ul class="days">
				<li v-for="(dayobject, index) in days" :key="index" @click="handleDate(dayobject, index)" :class="{active1: activeIndex === index}">
					<!--本月-->
					<!--如果不是本月  改变类名加灰色-->
					<div class="days-lis">
						<span :class="{'other-month': dayobject.day.getMonth()+1 != currentMonth, active: dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()}">{{ dayobject.day.getDate() }}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

.com-date {
  width: 100%;

  #calendar {
    padding: 0 17px;
  }

  .month {
    width: 100%;
  }

  .month ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }

  .year-month {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .year-month:hover {
    background: rgba(150, 2, 12, 0.1);
  }

  .choose-year {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20px;
    color: #252533;
    font-weight: bold;
  }

  .choose-month {
    text-align: center;
    font-size: 20px;
    color: #252533;
    font-weight: bold;
  }

  .arrow {
    padding: 30px;
  }

  .month ul li {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #dedede;
  }

  .weekdays {
    margin: 0;
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    color: #252533;
    justify-content: space-around;
  }

  .weekdays li {
    display: inline-block;
    width: 13.6%;
    text-align: center;
  }

  .days {
    padding: 0;
    background: #FFFFFF;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .days li {
    width: 14.2%;
    font-size: 20px;
    color: #252533;
	margin-bottom: r(10);

	.days-lis {
	  width: 100%;
	  text-align: center;
	  display: flex;
      align-items: center;
      justify-content: center;
	}
  }

	.days li span {
	  width: 32px;
	  height: 32px;
      border-radius: 50%;
	  display: flex;
	  text-align: center;
	  align-items: center;
	  justify-content: center;
	}

  .days li .active {
	width: 32px;
	height: 32px;
    border-radius: 50%;
    background: #F49B26;
    color: #fff;
    text-align: center;
  }

  .days li .other-month {
    color: gainsboro;
  }

  .active1 {
    position: relative;

	::after {
	    position: absolute;
		left: 50%;
		bottom: -8px;
		width: 5px;
		height: 5px;
		margin-left: -2px;
		content: '';
		background-color: #F49B26;
		border-radius: 50%;
	}
  }
}

export default {
	props: {
		className: {
			type: String,
			default: '',
		},
		startData: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			currentDay: 1,
			currentMonth: 1,
			currentYear: 1970,
			currentWeek: 1,
			days: [],
			otherDay: '',
			week_day: [],
			activeIndex: -1,
			activeFlag: false,
		}
	},
	created() {  //在vue初始化时调用
		this.initData(null);
		console.log(this.className, this.startData, '--startData');
	},
	methods: {
		/**
		 * 初始化
		 * @param {*} cur 
		 */
		initData(cur) {
			console.log(cur)
			var leftcount = 0;  //存放剩余数量
			var date;
			if (cur) {
				date = new Date(cur);
			} else {
				var now = new Date();
				var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
				d.setDate(42);
				date = new Date(this.formatDate(d.getFullYear(), d.getMonth()+1, 1));
			}
			this.currentDay = date.getDate();
			this.currentYear = date.getFullYear();
			this.currentMonth = date.getMonth() + 1;

			this.currentWeek = date.getDay(); // 0,1...6,
			// console.log(date, 'datedatedatedatedatedate');
			var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
			this.days.length = 0;
			this.week_day.length = 0;
			//初始化本周
			for (var i = this.currentWeek; i >= 0; i--) {
				var d = new Date(str);
				d.setDate(d.getDate() - i);
				var dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
				dayobject.day = d;
				this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
			}
			//其他周
			for (var i = 1; i <= 41 - this.currentWeek; i++) {
				var d = new Date(str);
				d.setDate(d.getDate() + i);
				var dayobject = {};
				dayobject.day = d;
				this.days.push(dayobject);
			}
			// console.log(this.days)
		},

		pickPre (year, month) {
			// setDate(0); 上月最后一天
			// setDate(-1); 上月倒数第二天
			// setDate(dx) 参数dx为 上月最后一天的前后dx天
			var d = new Date(this.formatDate(year, month, 1));
			d.setDate(0);
			this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
		},

		pickNext (year, month) {
			var d = new Date(this.formatDate(year, month, 1));
			d.setDate(42);
			this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
		},

		// 返回 类似 2016-01-02 格式的字符串
		formatDate (year, month, day) {
			var y = year;
			var m = month;
			if (m < 10) m = "0" + m;
			var d = day;
			if (d < 10) d = "0" + d;
			return y + "-" + m + "-" + d
		},

		handleDate (dayobject, index) {
			this.activeIndex = index;
			console.log(dayobject.day.getDate());
			this.$emit('handle-date');
		},
	},
}