vue 平铺日历选择组件封装（支持选择时间点或时间段）

最新推荐文章于 2024-08-09 15:20:09 发布
最新推荐文章于 2024-08-09 15:20:09 发布
阅读量1.4k 收藏 6
点赞数
分类专栏： vue学习笔记 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuoyiran520081/article/details/122256147
版权

项目中遇到进行日期选择的需求，直接平铺在页面上，如下图所示
在这里插入图片描述

<template>
	<div class="date-calender">
		<div class="header-title">
			<i @click="preYear" class="el-icon-d-arrow-left"></i>
			<i @click="preMon" class="el-icon-arrow-left"></i>
			<a class="data-now-a">{{currentYear}}年{{currentMonth+1}}月</a>
			<i @click="nextMon" class="el-icon-arrow-right"></i>
			<i @click="nextYear" class="el-icon-d-arrow-right"></i>

		</div>
		<div class="flex-week">
			<a class="a-week" v-for="(item,index1) in listXIngqi" :key="index1">{{ item }}</a>
		</div>
		<ul class="date">
			<!-- 标记当前时间 -->
			<!-- <li v-for="(item, index) in list" :key="index" @click="handerSelect(item)" class="riqili"
				:class="[( Number(item.y+''+item.m+''+item.d)  >= Number(starttime)  && Number(endtime)  >= Number(item.y+''+item.m+''+item.d)  || 
            item.y+''+item.m+''+item.d == starttime||  item.y+''+item.m+''+item.d == endtime ) ? 'activeSelect' : '',(item.y === year && item.m === month && item.d === day)?'current-day-cricle':'',item.isSign?'sign-select':'']">
				<div class="day" :class="{'text-color': item.cur}">
					{{item.d}}
					<a :class="item.y+''+item.m+''+item.d"></a>
				</div>
			</li> -->
			<!-- 不标记当前时间 -->
			<li v-for="(item, index) in list" :key="index" @click="handerSelect(item)" class="riqili"
				:class="[( Number(item.y+''+item.m+''+item.d)  >= Number(starttime)  && Number(endtime)  >= Number(item.y+''+item.m+''+item.d)  || 
            item.y+''+item.m+''+item.d == starttime||  item.y+''+item.m+''+item.d == endtime ) ? 'current-day-cricle' : '',item.isSign?'sign-select':'',(item.y === year && item.m === month && item.d === day)?'sign-quick' : '']">
				<div class="day" :class="{'text-color': item.cur}">
					{{item.d}}
					<a :class="item.y+''+item.m+''+item.d"></a>
				</div>
			</li>
			<li class="bg-month">{{currentMonth+1}}</li>
			<li @click="getCurrentDate" class="quick-day-btn">今天</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// year: new Date().getFullYear(), // 今日年份
			// month: new Date().getMonth() + 1, // 今日月份
			// day: new Date().getDate() > 9 ? new Date().getDate() : `0${new Date().getDate()}`, // 今日日份
			year: '', // 今日年份
			month: '', // 今日月份
			day: '', // 今日日份
			isQuick: false, //是否快捷今日
			currentYear: '', // 当前显示年份
			currentMonth: '', // 当前显示月份 0-11,显示时加一
			currentDay: '', // 当前显示日份
			monthDays: [], // 1-12月的天数
			list: [],
			listXIngqi: ['日', '一', '二', '三', '四', '五', '六'],
			// listXIngqi: ['一', '二', '三', '四', '五', '六', '日'],
			selectCompare: [],
			clickcount: 0, //点击次数
			starttime: '', //点击的开始的日期
			endtime: '', //点击的结束时间 数字
			params_starttime: '', //抛出去的参数
			params_endtime: '' //抛出去的参数
		};
	},
	props: {
		isSingleChoice: {
			type: Boolean,
			default: true
		},
		signArr: {
			type: Array,
			default: () => []
		}
	},
	mounted() {
		this.showCalender();
	},
	methods: {
		// 点击的日期
		handerSelect(mess) {
			if (mess.cur) {
				// 清除快捷标记
				if (!mess.isToQuick) {
					this.year = ''; // 今日年份
					this.month = ''; // 今日月份
					this.day = '';
				}
				// 点击的是当前月
				this.clickcount++;
				if (this.isSingleChoice) {
					this.starttime = mess.y + '' + mess.m + '' + mess.d;
					let activeDate = this.$Tool.formate(`${mess.y}/${mess.m}/${mess.d}`, 'yyyy-MM-dd');
					this.$emit('change', activeDate);
				} else {
					// 选择时间段
					if (this.clickcount % 2 == 1) {
						// 开始时间
						this.starttime = mess.y + '' + mess.m + '' + mess.d;
						this.endtime = '';
						this.params_starttime =
							mess.y +
							'-' +
							(mess.m > 9 ? mess.m : '0' + mess.m) +
							'-' +
							(mess.d > 9 ? mess.d : '0' + mess.d);
						this.params_endtime = '';
					} else {
						// 结束时间
						this.endtime = mess.y + '' + mess.m + '' + mess.d;
						this.params_endtime =
							mess.y +
							'-' +
							(mess.m > 9 ? mess.m : '0' + mess.m) +
							'-' +
							(mess.d > 9 ? mess.d : '0' + mess.d);
						if (Number(this.starttime) > Number(this.endtime)) {
							this.endtime = Number(this.starttime);
							this.params_endtime = this.params_starttime;
							this.starttime = Number(mess.y + '' + mess.m + '' + mess.d);
							this.params_starttime =
								mess.y +
								'-' +
								(mess.m > 9 ? mess.m : '0' + mess.m) +
								'-' +
								(mess.d > 9 ? mess.d : '0' + mess.d);
						}
					}
					this.$emit('change', [this.params_starttime, this.params_endtime]);
				}
			} else {
				// if(mess.d>20){
				//     this.nextMon();
				// }else{
				//     this.preMon();
				// }
			}
		},

		isLeap(year) {
			// 判断是不是闰年
			return year % 100 === 0 ? (year % 400 === 0 ? 1 : 0) : year % 4 === 0 ? 1 : 0;
		},

		showCalender(type) {
			console.log(type);
			this.list = [];
			this.newDate = new Date();
			if (!type) this.currentYear = this.newDate.getFullYear();
			if (!type) this.currentMonth = this.newDate.getMonth();
			this.monthDays = [
				31,
				28 + this.isLeap(this.currentYear),
				31,
				30,
				31,
				30,
				31,
				31,
				30,
				31,
				30,
				31
			];
			this.currentDay = this.newDate.getDate();
			this.firstDay = new Date(`${this.currentYear}-${this.currentMonth + 1}-1`);
			this.firstnow = this.firstDay.getDay(); // 当月第一日是星期几 1-7
			// if (this.firstnow === 0) this.firstnow = 7;   //一周从周一开始的写法
			// 从周一开始判断this.firstnow > 1  减去等于的情况
			if (this.firstnow >= 1) {
				// 前一个月份
				let monIndex = this.currentMonth;
				let year;
				if (monIndex === 0) {
					year--;
					monIndex = 11;
				} else {
					monIndex--;
				}
				//一周从周一开始的写法
				// for (let i = 0; i < this.firstnow - 1; i++) {
				// 	this.list.unshift({
				// 		y: year,
				// 		m: monIndex + 1,
				// 		d: this.monthDays[monIndex] - i
				// 	});
				// }
				for (let i = 0; i < this.firstnow; i++) {
					this.list.unshift({
						y: year,
						m: monIndex + 1,
						d: this.monthDays[monIndex] - i
					});
				}
			}
			for (let i = 0; i < this.monthDays[this.currentMonth]; i++) {
				// 标记当天时间
				let dateF = `${this.currentYear}/${this.currentMonth + 1>9?this.currentMonth + 1:`0${this.currentMonth + 1}`}/${i + 1 > 9 ? i + 1 : `0${i + 1}`}`;
				let dateSignF = this.signArr.filter((df) => {
					let dfFormate = this.$Tool.formate(df, 'yyyy/MM/dd');
					return dfFormate == dateF;
				});
				// 当前月份
				this.list.push({
					y: this.currentYear,
					m: this.currentMonth + 1,
					d: i + 1 > 9 ? i + 1 : `0${i + 1}`,
					cur: true,
					isSign: dateSignF.length > 0 ? true : false
				});
			}
			//一周从周一开始的写法
			// const num = (this.monthDays[this.currentMonth] + this.firstnow - 1) % 7;
			const num = (this.monthDays[this.currentMonth] + this.firstnow) % 7;
			// 从周一开始判断num > 0  减去等于的情况
			if (num >= 0) {
				// 下个月份
				let monIndex2 = this.currentMonth;
				let year2;
				if (monIndex2 === 11) {
					year2++;
					monIndex2 = 0;
				} else {
					monIndex2++;
				}
				if (num > 0) {
					for (let i = 0; i < 7 - num; i++) {
						this.list.push({
							y: year2,
							m: monIndex2 + 1,
							d: i + 1
						});
					}
				}
			}
		},
		clearData() {
			this.clickcount = 0;
			this.starttime = '';
			this.endtime = '';
			this.params_starttime = '';
			this.params_endtime = '';
		},
		// 上个月
		preMon() {
			this.clearData();
			if (this.currentMonth === 0) {
				this.currentYear--;
				this.currentMonth = 11;
			} else {
				this.currentMonth--;
			}
			this.showCalender('pre');
		},
		// 下个月
		nextMon() {
			this.clearData();
			if (this.currentMonth === 11) {
				this.currentYear++;
				this.currentMonth = 0;
			} else {
				this.currentMonth++;
			}
			this.showCalender('next');
		},
		// 上一年
		preYear() {
			this.clearData();
			this.currentYear--;
			this.showCalender('pre');
		},
		// 下一年
		nextYear() {
			this.clearData();
			this.currentYear++;
			this.showCalender('next');
		},
		// 今日
		getCurrentDate() {
			let _date = {
				cur: true,
				d: new Date().getDate(),
				isSign: true,
				m: new Date().getMonth() + 1,
				y: new Date().getFullYear(),
				isToQuick: true
			};
			this.year = new Date().getFullYear(); // 今日年份
			this.month = new Date().getMonth() + 1; // 今日月份
			this.day = new Date().getDate() > 9 ? new Date().getDate() : `0${new Date().getDate()}`; // 今日日份
			this.handerSelect(_date);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/travel-mixin.scss';
.date-calender {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	.header-title {
		width: 220px;
		height: 40px;
		opacity: 1;
		// background: #f8f8f7;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		margin-top: 40px;
		margin-bottom: 17px;
		border-bottom: 1px solid $brdededed;
		i {
			font-size: 12px;
			color: rgba(0, 0, 0, 0.45);
			cursor: pointer;
		}
		.data-now-a {
			font-size: 15px;
			font-family: Helvetica, Helvetica-Regular;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.85);
			width: 100 px;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
		}
	}

	.flex-week {
		display: flex;
		justify-content: space-between;
		width: 210px;
		.a-week {
			font-size: 0;
			font-size: 14px;
			font-family: Helvetica, Helvetica-Regular;
			font-weight: 400;
			text-align: center;
			color: #253f50;
			display: inline-block;
			width: 30px;
			height: 30px;
		}
	}

	.date {
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
		width: 210px;
		height: 180px;
		.riqili {
			// height: 28px;
			// width: 28px;
			// border: 1px solid transparent;
			width: 30px;
			height: 30px;
			display: flex;
			// 末尾或者上月天数颜色
			justify-content: center;
			align-items: center;
			color: $cdisabled;
			font-size: 14px;
			position: relative;
			z-index: 0;
			//当前月的正常颜色
			.text-color {
				// font-size: 0;
				font-size: 14px;
				font-family: Helvetica, Helvetica-Regular;
				font-weight: 400;
				text-align: center;
				color: #595959;
			}
		}
		.riqili:nth-child(7n) {
			margin-right: 0px;
		}
	}
	.activeSelect {
		width: 28px;
		height: 28px;
		opacity: 1;
		border: 1px solid $comain !important;
		border-radius: 50%;
		.day {
			color: $comain !important;
		}
	}
	// 标识日期
	.sign-select {
		width: 28px;
		height: 28px;
		opacity: 1;
		background: $cdate-status;
		border: 1px solid $cdate-status !important;
		border-radius: 50%;
		.day {
			color: $c6 !important;
		}
	}
	// 背景月份
	.bg-month {
		width: 120px;
		position: absolute;
		top: 0px;
		left: 50%;
		margin-left: -60px;
		font-size: 100px;
		color: $cbgmain;
		z-index: -1;
		cursor: pointer;
		text-align: center;
	}
	// 当天快捷键
	.quick-day-btn {
		position: absolute;
		bottom: -50px;
		width: 100%;
		height: 40px;
		line-height: 40px;
		margin-top: 30px;
		text-align: center;
		border: 1px solid $comain;
		border-radius: 4px;
		background: $cbgmain;
		color: $comain;
		cursor: pointer;
	}
	// 当月当天的标识
	.current-day-cricle,
	.sign-quick {
		display: block;
		width: 30px;
		height: 30px;
		background: $comain;
		border-radius: 50%;
		position: absolute;
		bottom: 0px;
		left: 0px;
		color: $cf;
		z-index: -1;
		.text-color {
			color: $cf !important;
		}
	}
}
</style>
zuo-yiran
关注
专栏目录
Vue - 高效稳定的颜色选择器组件（支持鼠标拖动选择与手动输入16进制、rgb颜色值）
王佳斌
10-03 3623
Vue.js 高效稳定的颜色选择器组件（支持鼠标拖动选择与手动输入16进制、rgb颜色值），vue-color 官方文档，nuxt.js项目中使用颜色选择器，vColorPicker - 基于Vue的颜色选择器插件，vue颜色选择器插件Vue自定义组件:颜色选择器及其实现原理vue颜色选择器el-color-picker的安装及使用，vue项目怎么写颜色选择的组件，VUE 自定义取色器组件的实现，vue项目配置主题颜色。
vuedatetimepicker一个Vuejs的日期选择器组件
08-10
vue-datetime-picker 一个Vue.js的日期选择器组件
vue 平铺式日历--在原基础上增加小圆点功能
lixiaohua66的博客
06-25 1943
原插件效果： 需求效果： 由于原插件无小圆点功能，所以增加了一个小圆点数组属性，另外注意，由于是vue，修改插件会比较麻烦，所以本人把插件单独作为组件放到component里面引入，而非直接下载使用。 使用的插件： vue-material-year-calendar(可自行在GitHub搜步骤）以下步骤，按需求更改过，红色框为自己添加内容） 使用步骤： 1.安装插件： npm install vue-material-year-calendar --save 2.导入插件： im
vue项目，el-date-picker日期组件默认显示当前日期前一周,未来日期不可选择设置
最新发布
id_qq的博客
08-09 290
1.template内容。2.script内容。
vue实现日历列表
自由&不束缚的博客
06-16 1980
vue平铺实现一年的日历表
vuejs-datepicker|简单易用的Vue.js日期选择组件
delmarks的博客
02-22 1万+
vuejs-datepicker是一个简单易用的Vue.js日期选择组件。它使用了Bootstrap 4的样式，支持多种语言，具有直观的界面，易于配置和扩展。
vue vue3 日期选择的组件，封装组件
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
04-08 2357
基于element的日期选择组件，以下是达到的效果： 1.选择年，日期选择组件默认填充是：当时的年； 2.选择月，日期选择组件默认填充的是：当时的年月； 3.选择日，日期选择组件默认填充的是：当时的年月日；
VUE时间范围选择的组件
godflyfly的博客
11-02 2626
VUE时间范围选择的组件
Vue文件封装日历组件
02-18 209
封装就是要具有灵活性，样式自适应，调用的时候传入props就可以变成自己想要的样式。 效果展示网址：https://1963331542.github.io/ 源代码： 1 <template> 2 <div :style="mainBoxStyle" @mouseenter="setEnterFn()" @mouseleave="...
Vue2日期选择器插件（vue-datepicker-local）
热门推荐
Mr Dear的博客
12-24 1万+
支持年份选择器，月份选择器，日期选择器，时间选择器，且均支持范围选择
vue日历组件封装，可全选，可单选，并可以取各自的值
IT博客技术分享
07-10 3389
先上效果图： 父组件：calendars.vue <template> <div class="hello"> <h1>日历测试</h1> <div>当前选中的年/月:{{curYearMonths}}</div> <div style="margin-bottom:20...
vue时间选择组件.zip
08-20
类似头条投放端的时间段选择，最小粒度为半小时。鼠标滑动选择区域内的时间。分星期，粒度为48*7。鼠标也可点击选择。
vue20的移动端日期选择组件
08-12
vue2.0的移动端日期选择组件
移动端vue日期选择组件
08-10
a vue component of calendar for mobile移动端vue日期选择组件
vue自定义日历组件（12日历平铺） pc/移动
YYYY77777的博客
08-24 2164
效果图：{currentYear } } vue自定义12日历组件(简单易上手) 日历封装 pc/移动端 < / div > < div class = "choose-search" > < el - input{{
vue日历排班组件_VUE实现日历组件功能
weixin_34388311的博客
02-11 2240
哈哈， 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件。过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的。几者加起来体积庞大不说，也并不是很好使用在vue这种数据驱动的项目里。所以笔者经过一周的拍脑袋，做了一个十分简陋的版本。简介目前只支持月视图，该组件是 .vue 文件的形式。所以，大家在使用的时候 是需要node的咯~~~安装DEM...
vue中封装自定义组件
li_shujun的博客
02-14 3710
你封装过组件吗？？ 说一下组件封装？？？？ 你在项目中是如何封装组件的？？？？？ … 以上问题是面试官，最常问到的问题？那么你应该如何回答呢？ 1 答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功.
基于vue2.0+vuex的日期选择组件
大灰狼的小绵羊哥哥的博客
02-09 6192
calendar vue日期选择组件 介绍 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的，查看了vuex后，发现vuex的写法还不是基于2.0的，所以就自己动手做了 github地址： https://github.com/jamielhf/vue/tree/master/calendar 原文： http://www
推荐一款实用的 Vue2 时间选择器组件 - vue2-timepicker
gitblog_00052的博客
04-19 1772
推荐一款实用的 Vue2 时间选择器组件 - vue2-timepicker vue2-timepickerA dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support项目地址:https://gitcode.com/gh_mirrors/vu/vue2-timepicker ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值