Element UI 的日历控件，并在日期中做标注

需求：1.在日历中给日期做标注，点击日期获取到当前的日期

2.点击对应的上一月，下一月，今天可以获取到对应的月份

<template><el-card v-model="nowdate" shadow="always" :body-style="{ padding: '15px' }" style="height: 400px"><el-calendar><template #dateCell="{data}"><div style="margin:0px" @click="calendarOnClick(data)">{{ data.day.split('-').slice(2).join() }} <div v-for="(i, index) in dayTime" :key="index"><div v-if="data.day==i" class="budge"></div></div></div></template></el-calendar></el-card>
</template>
<script>
export default{data(){return{nowdate: new Date(),dayTime: ["2022-03-28", "2022-03-25", "2022-03-22", "2022-03-17", "2022-03-16","2022-03-14"],dataTime: null,dataTimeY: null,dataTimeM: null,}},created(){// 日历上个月按钮this.$nextTick(()=>{let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(1)")prevBtn.addEventListener('click',()=>{if(this.dataTime === null){const date = new Date(this.nowdate);const Y = date.getFullYear();const M = date.getMonth() + 1;this.dataTimeM = Number(M-Number('1'))this.dataTimeY = Y this.dataTime = this.dataTimeY + '-' + (this.dataTimeM < 10 ? '0' + this.dataTimeM : this.dataTimeM);}else if(this.dataTimeM !== null && this.dataTimeM === 1){this.dataTimeM = 12 this.dataTime = (this.dataTimeY - Number('1')) + '-' + String(this.dataTimeM < 10 ? '0' + this.dataTimeM : this.dataTimeM);this.dataTimeY = this.dataTimeY - Number('1')}else{this.dataTimeM = Number(this.dataTimeM-Number('1')) this.dataTime = this.dataTimeY + '-' + (this.dataTimeM < 10 ? '0' + this.dataTimeM : this.dataTimeM);}console.log(this.dataTime)})})// 日历按钮今天this.$nextTick(()=>{let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(2)")prevBtn.addEventListener('click',()=>{const date = new Date(this.nowdate);const Y = date.getFullYear();const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';const D = date.getDate() + ' ';this.dataTime = Y + '-' + M + D;this.dataTimeY = Y;this.dataTimeM = date.getMonth() + 1;console.log(this.dataTime)})})// 日历下个月按钮this.$nextTick(()=>{let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(3)")prevBtn.addEventListener('click',()=>{if(this.dataTime === null){const date = new Date(this.nowdate);const Y = date.getFullYear();const M = date.getMonth() + 1;this.dataTimeM = Number(M+Number('1'))this.dataTimeY = Y this.dataTime = this.dataTimeY + '-' + (this.dataTimeM < 10 ? '0' + this.dataTimeM : this.dataTimeM);}else if(this.dataTimeM !== null && this.dataTimeM === 12){this.dataTimeM = 1 this.dataTime = (this.dataTimeY + Number('1')) + '-' + String(this.dataTimeM < 10 ? '0' + this.dataTimeM : this.dataTimeM);this.dataTimeY = this.dataTimeY + Number('1')}else{this.dataTimeM = Number(this.dataTimeM+Number('1')) this.dataTime = this.dataTimeY + '-' + (this.dataTimeM < 10 ? '0' + this.dataTimeM : this.dataTimeM);}console.log(this.dataTime)})})},methods:{// 获取点击日期calendarOnClick(data){console.log(data.day)},},
}
</script>
<style scoped>.budge {width: 8px;height: 8px;background: #e6a23c;border-radius: 50%;margin: 0 auto;margin-top: 10px;}::v-deep .el-calendar-day {height: 40px;display: flex;justify-content: center;align-items: center;}.card-header span{color: #444;}::v-deep .el-dialog__header{height: 40px;line-height: 40px;}
</style>

Element UI 的日历控件，并在日期中做标注相关推荐

vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用参考文章: (1)vue的$nextTi ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
Unity UGUI自制日历控件带农历日期
新手小白无聊时做的一个日历控件,需要的朋友可以借鉴下,高手大神也可以指点一下. 核心代码获取某年某月有多少天 /// 获取某年某月有多少天/// </summary>/// <p ...
element ui 图片控件排序_vuedraggable+element ui实现页面控件拖拽排序效果
项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项目没有使用npm,都是使用的引入的 ...
9 款样式华丽的 jQuery 日期选择和日历控件
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
Selenium2+python自动化25-js处理日历控件（修改readonly属性）
前言日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...
Ajax Toolkit日历控件CalendarExtender求教！
Ajax Toolkit新控件CalendarExtender(日历控件) 在DIV中被下拉框遮挡了,如何能让其不被遮挡? 转载于:https://www.cnblogs.com/jerryleee1 ...
WPF 4 日历控件（Calendar）
WPF 4 日历控件(Calendar) 原文:WPF 4 日历控件(Calendar) 在之前我已经写过两篇关于WPF 4 任务栏(Taskbar)相关的特性.相信自从VS2010 Beta 版放出 ...
wpf 日期选择对话窗_WPF 4 日历控件（Calendar）
在之前我已经写过两篇关于WPF 4 任务栏(Taskbar)相关的特性.相信自从VS2010 Beta 版放出后,WPF 的粉丝们肯定在第一时间了解了WPF 4 的一些新控件及新功能.赶在明天Visu ...

Element UI 的日历控件，并在日期中做标注

Element UI 的日历控件，并在日期中做标注相关推荐

最新文章

热门文章