elementui 日历组件el-calendar使用总结

功能:

1.日历可以周视图、月视图切换;

2.点击月视图中日期可以切换到对应周视图;

3.点击周视图查看当日对应数据;

4.周、月视图状态下,点击前后按钮,分别切换对应上下的周、月;

5.点击回到今天,立即切回到周、月视图下对应的当日;

引用dayjs处理日期,结合el-calendar完美实现。

要注意的是,日历显示周的话,传的日期范围要按照计算所在星期,比如我们的需求是周日为每周起始日,那么就要给周日的日期和周六日期为起始日,月视图我不想再去计算日期范围了,就直接用了:value,注意用的不是v-model而是value,因为value是单向的,v-model是双向数据绑定了。

<template>
<div class="childContainer"><CompBar name="XX日历" iconName="rili.png" titleName="回到今天" @handleBarClick="nowCalendar"><div class="kalendar"><div class="kalendar-header"><span class="current-monuth"><i class="el-icon-caret-left" @click="showPrev"></i><i class="el-icon-caret-right" @click="showNext"></i></span><el-radio-group v-model="monthYear" size="mini"><el-radio-button label="周"></el-radio-button><el-radio-button label="月"></el-radio-button></el-radio-group></div><CalendarMonth v-if="monthYear==='月'" :calendarValue="monthDate" :selectDay="dayDate" :dateList="dateList" @getPlanList="getplanList"></CalendarMonth><CalendarWeek v-else :rangeArr="dateRange" :selectDay="dayDate" :dateList="dateList"         
@getPlanList="getplanList"></CalendarWeek></div><tabs :class="monthYear==='月'?'monthTabs':'weekTabs'" v-model="activePlan" v-loading="isLoading"><el-tab-pane name="tabApplyEndPlan">
//此处是个列表
</el-tab-pane><el-tab-pane name="tabEndPlan"></el-tab-pane></tabs>
</template>
// 此处省略组件、接口引入
import dayjs from 'dayjs';
var weekplugin = require('dayjs/plugin/weekday');
dayjs.extend(weekplugin)// 此处省略,直接放核心代码
data(){return{activePlan:'tabApplyEndPlan',monthYear:'周', // 周、月视图切换,默认显示周monthDate:'', // 传后端参数 YYYY-MM,查视图上需要显示点的日期dayDate:'', // 传后端参数 YYYY-MM-DD,查视图下面对应的当日数据列表dateRange:[], // 周日历,传入周日历视图日期范围dateList:[], // 存放月数据,视图中需要显示点的日期}
},watch:{
// 比较简单,直接省略代码了,记录下逻辑
// 监听 monthDate、dayDate 值的改变,调用对应接口
},methods:{
showPrev() {// 上个月if (this.monthYear === '月') {this.monthDate = dayjs(this.monthDate).add(-1, 'month').format('YYYY-MM');// 需要判断当前选中日期是否属于当前月份let _dayDate = dayjs(this.dayDate).format('YYYY-MM');if (_dayDate === this.monthDate) {// 计算本周第一天let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');// 计算本周最后一天let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');this.dateRange = [day1, day2];} else {let day1 = dayjs(this.monthDate).startOf('month').startOf('week').format('YYYY-MM-DD');let day2 = dayjs(this.monthDate).startOf('month').endOf('week').format('YYYY-MM-DD');this.dateRange = [day1, day2]}}// 上星期if (this.monthYear === '周') {// 获取当前周视图let day1 = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM-DD');let day2 = dayjs(this.dateRange[1]).add(-1, 'week').endOf('week').format('YYYY-MM-DD');this.monthDate = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM');this.dateRange = [day1, day2]}}, 
showNext() {// 下个月if (this.monthYear === '月') {this.monthDate = dayjs(this.monthDate).add(1, 'month').format('YYYY-MM');// 需要判断当前选中日期是否属于当前月份let _dayDate = dayjs(this.dayDate).format('YYYY-MM');if (_dayDate === this.monthDate) {// 计算本周第一天let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');// 计算本周最后一天let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');this.dateRange = [day1, day2];} else {let day1 = dayjs(this.monthDate).endOf('month').startOf('week').format('YYYY-MM-DD');let day2 = dayjs(this.monthDate).endOf('month').endOf('week').format('YYYY-MM-DD');this.dateRange = [day1, day2]}}// 下星期if (this.monthYear === '周') {// 获取当前周视图let day1 = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM-DD');let day2 = dayjs(this.dateRange[1]).add(1, 'week').endOf('week').format('YYYY-MM-DD');this.monthDate = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM');this.dateRange = [day1, day2]}},
// 返回今日nowCalendar() {this.monthDate = dayjs(new Date()).format('YYYY-MM');this.dayDate = dayjs(new Date()).format('YYYY-MM-DD');let day1 = dayjs(new Date()).startOf('week').format('YYYY-MM-DD');let day2 = dayjs(new Date()).endOf('week').format('YYYY-MM-DD');this.dateRange = [day1, day2];this.activePlan = 'tabApplyEndPlan'},
// 周、月视图日期被点击处理方法getPlanList(date) {// console.log(this.monthYear)// console.log(date)this.dayDate = date.day;// 点击上、下月/周日期,不涉及视图的切换if (this.monthYear === '月') {if (date.type === 'next-month') {this.showNext()}if (date.type === 'prev-month') {this.showPrev()}}if (this.monthYear === '周') {let _month = dayjs(date.day).format('YYYY-MM');if (date.type === 'next-month') {if (_month !== this.monthDate) {this.monthDate = dayjs(date.day).format('YYYY-MM');}}if (date.type === 'prev-month') {if (_month !== this.monthDate) {this.monthDate = dayjs(date.day).format('YYYY-MM');}}}if (date.type === 'current-month') {this.monthYear = '周';// 计算本周第一天let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');// 计算本周最后一天let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');// 计算点击日期所在周第一天所属月this.monthDate = dayjs(day1).startOf('week').format('YYYY-MM');this.dateRange = [day1, day2];}},}

自定义日历样式(没有用日历原先的头,全部自己重写的,还不错): 

::v-deep .kalendar {&-header {text-align: center;margin: 10px 16px 0 16px;.current-monuth {font-size: 16px;letter-spacing: 0;font-weight: 500;margin-left: 15%;color: #262626;font-family: PingFangSC-Medium;i {cursor: pointer;}}.el-radio-group {float: right;}.el-radio-button__orig-radio:checked + .el-radio-button__inner {background: #ffffff;box-shadow: -1px 0 0 0 transparent;border: 1px solid rgba(199, 0, 11, 1);font-family: PingFangSC-Medium;font-size: 12px;color: #c7000b;letter-spacing: -0.04px;font-weight: 500;}.el-radio-button__inner:hover {color: #c7000b;}}.calender-dot-box {width: 100%;bottom: -8px;position: absolute;span {width: 6px;height: 6px;margin-right: 3px;border-radius: 50%;display: inline-block;&:last-of-type {margin-right: 0;}}.endPlan {background-color: #d61212;}.applyEndPlan {background-color: #ffd100;}}.el-calendar {&__body {padding: 10px 16px;}.is-today {.el-calendar-day {.calender-date {width: 34px;height: 34px;margin: 0 auto;color: #ff534f;border-radius: 10px;background: #fff;box-shadow: none;}}}&__header {display: none;}.current {.el-calendar-day {color: #262626;}}.prev,.next {color: #bfbfbf;}&-day {padding: 0;font-weight: 700;font-size: 16px;letter-spacing: 0;text-align: center;position: relative;transition: color 0.3s;font-family: DINAlternate-Bold;}&-table {th {font-family: PingFangSC-Regular;font-size: 16px;color: #262626;letter-spacing: 0;text-align: center;line-height: 34px;font-weight: 400;padding: 0;&:last-of-type,&:first-of-type {color: #ff564e;}}td {border: none;&.is-selected {background-color: transparent;}}.el-calendar-day {height: 34px;line-height: 34px;&:hover {background-color: transparent;}.calendar-isSelected {width: 34px;height: 34px;margin: 0 auto;color: #fff;border-radius: 10px;background: #ff534f;box-shadow: 0px 0px 2px 0px rgba(238, 88, 64, 1);}}}}

再看看子组件里面,先看月的:

<template><!-- 月日历 --><el-calendar :value="calendarValue" :first-day-of-week="7" value-format="YYY-MM"><template slot="dateCell" slot-scope="{ date, data }"><div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">{{ date.getDate() }}</div><div v-else class="calender-date" @click="handleDate($event, date, data)">{{ date.getDate() }}</div><div class="calender-dot-box" @click="handleDate($event, date, data, 'dot')"><template v-for="(item) in dateLists"><span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span><span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span></template></div></template></el-calendar>
</template>
<script>
export default {components: {},name: "CalendarMonth",props: {selectedDay: {type: String,default: "",},calendarValue: {type: String,default: new Date(),},dateList: {type: Array,default: () => {return [];},},},watch: {dateList: {handler(list) {this.dateLists = list;},immediate: true,},},data() {return { monthDate: this.calendarValue, dateLists: [] };},created() { },methods: {handleDate(e, date, data) {this.$emit("getPlanList", data);},},
};
</script>
<style lang="scss" scoped></style>

周日历组件:

<template><!-- 周日历 --><el-calendar :range="rangeArr" :first-day-of-week="7" value-format="YYY-MM"><template slot="dateCell" slot-scope="{date,data}"><div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">{{ date.getDate() }}</div> <div v-else class="calender-date" @click="handleDate($event, date, data)">{{ date.getDate() }}</div><div class="calender-dot-box" @click="handleDate($event, date, data)"><template v-for="(item) in dateList"><span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span><span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span></template></div></template></el-calendar>
</template>
<script>
export default {components: {}, name: 'CalendarWeek', props: {selectedDay: {type: String, default: '',}, rangeArr: {type: Array,default: () => {return [];}}, dateList: {type: Array, default: () => {return [];}}}, data() {return {}}, created() {}, methods: {handleDate(e, date, data) {// console.log(e,date,data)this.$emit('getPlanList', data)},}
}</script>
<style lang="scss" scoped></style>

其实应该把日历组件二次封装一下,就不用单独再去写周、月日历子组件了,有空了可以试试。

不过不得不再吐槽一句,elementui的日历组件,给提供的API真心的少,功能很简单。。。

最终效果图:

月视图效果图:

月视图下,有时候会出现整整一行的灰色日期,看起来不是很美观,那么就需要操作dom,通过js判断,操作dom来处理。大概思路就是,先通过 document.querySelectorAll('.el-calendar-table__row') 获取到所有.el-calendar-table__row的元素节点lists,然后循环遍历这些节点,若其子元素class中含有.current,那么就说明是带有当月的日期,则不改变样式,若不含,则说明这整行都是前\后月的日期,那么就可以把该.el-calendar-table__row的css里面加上属性display:none。

周视图效果图: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/872371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法 —— 高精度(模拟)

目录 加法高精度 两个正整数相加 两个正小数相加 两正数相加 减法高精度 两个正整数相减 两个正小数相减 两正数相减 加减法总结 乘法高精度 两个正整数相乘 两个正小数相乘 乘法总结 加法高精度 题目来源洛谷&#xff1a;P1601 AB Problem&#xff08;高精&#x…

如何PR到别人仓库(指定分支,无废话)

如何PR到别人仓库&#xff08;指定分支&#xff09; 记录一下&#xff0c;之前都是直接master分支&#xff0c;现在记录如何pr到别人仓库的其他分支 首先进入别人仓库然后点击fork到自己仓库 步骤&#xff08;以博主自己一个例子为例&#xff09; &#xff08;1&#xff09;…

c++ primer plus 第16章string 类和标准模板库,16.1.3 使用字符串

c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串 c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串 文章目录 c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串16.1.3 使用字符串程序清单16.3 hangman.cpp 16.1.3 使用字符串 现在&a…

【题目/训练】二叉树的创建遍历(递归非递归)

一、根据二叉树创建字符串 思路&#xff1a;在正常前序递归遍历的基础上&#xff0c;单独加上一个考虑到右子树为空的情况&#xff0c;如下&#xff1a;其结果为 1&#xff08;2&#xff08;4&#xff08;5&#xff09;&#xff08;6&#xff09;&#xff09;&#xff09;&…

馥郁珍藏:品味红酒的层次与细腻

在生活的点滴中&#xff0c;总有一些事物以其不同的魅力&#xff0c;让我们为之驻足&#xff0c;为之沉醉。红酒&#xff0c;便是其中之一。它不仅仅是一种饮品&#xff0c;更是一种情感的寄托&#xff0c;一种生活的艺术。今天&#xff0c;就让我们一起走进红酒的世界&#xf…

工控主板:搭载海光3300处理器的全国产化工控主板

最近为客户定做了一款全国产化的工控机主板。搭载海光3300核心板的含有丰富接口的工控主板。

一张图生成绘画全过程,这下人人都成“原画师”了

玩过SD的应该都知道ControlNet吧&#xff0c;最近ControlNet的作者Lvmin Zhang 又搞了一个开源项目PaintsUndo&#xff0c;在Github刚上线就收获了2.7k Star。 只需要上传一张静态图像&#xff0c;PaintsUndo就可以根据提供的图像自动生成对应的绘画全过程视频。 展示从一张白…

linux中关于环境变量的常用的设置方法

一. linux中设置环境变量的方式 1.使用/etc/environment, 是一个全局的环境变量设置文件&#xff0c;它会影响到所有用户和所有进程。当你需要设置一个全局的环境变量时&#xff0c;应该使用这个文件。这个文件的格式是 KEYvalue&#xff0c;每行一个环境变量。 2. 使用/etc/…

C# Winform的三态CheckBox,以及批量修改Panel中的控件

在C# WinForms中&#xff0c;如果你想批量修改一个Panel容器内的所有CheckBox控件的状态&#xff0c;你可以使用foreach循环来遍历Panel的Controls集合。下面是一个示例&#xff0c;展示了如何将一个Panel内所有的CheckBox控件设为选中状态&#xff08;Checked true&#xff0…

昇思25天学习打卡营第13天|munger85

文本解码原理–以MindNLP为例 重要的就是怎么样把数字最后转化成真正的文字。而且自回归模型它会一个字给一个字的预测&#xff0c;下一个字应该是什么&#xff1f; 如果这个模型下载很慢&#xff0c;你就可以通过这种方式从摩大社区进行下载。 这种方式&#xff0c; 每一次候…

如何让LabVIEW程序框图的图标简化,从而节省空间?

再点击选项 取消掉箭头所示的√即可。 这样就可以将生成的图标从下面所示&#xff1a; 变成简化的图标&#xff0c;如下所示&#xff1a;

【Pytorch】数据集的加载和处理(一)

Pytorch torchvision 包提供了很多常用数据集 数据按照用途一般分为三组&#xff1a;训练&#xff08;train&#xff09;、验证&#xff08;validation&#xff09;和测试&#xff08;test&#xff09;。使用训练数据集来训练模型&#xff0c;使用验证数据集跟踪模型在训练期间…

安全防御拓扑1

目录 实验的拓扑&#xff1a; 要求&#xff1a; 我搭建的实验拓扑 步骤&#xff1a; 创建vlan&#xff1a; 接口配置&#xff1a; 防火墙&#xff1a; 防火墙配置&#xff1a; 建立安全策略&#xff1a; 防火墙的用户&#xff1a; 办公区的市场部和研发部用户 市场部…

杰发科技AC7801 —— __attribute__指定地址存储常量

const uint8_t usFlashInitVal[] __attribute__((at(0x08002800))) {0x55,0x55,0x55,0x55,0x55};//定位在flash中&#xff0c;0x00030000开始的6个字节信息固定 注意7801的地址在8000000之后 如地址选0x00000800烧录时候报错 不知道是不是atclinktool的bug&#xff0c;使用_…

勒索防御第一关 亚信安全AE防毒墙全面升级 勒索检出率提升150%

亚信安全信舷AE高性能防毒墙完成能力升级&#xff0c;全面完善勒索边界“全生命周期”防御体系&#xff0c;筑造边界勒索防御第一关&#xff01; 勒索之殇&#xff0c;银狐当先 当前勒索病毒卷携着AI技术&#xff0c;融合“数字化”的运营模式&#xff0c;形成了肆虐全球的网…

数据结构(4.4)——求next数组

next数组的作用:当模式串的第j个字符失配时&#xff0c;从模式串的第next[j]的继续往后匹配 求模式串的next数组(手算) next[1] 任何模式串都一样&#xff0c;第一个字符不匹配时&#xff0c;只能匹配下一个子串&#xff0c;因此&#xff0c;往后&#xff0c;next[1]都无脑写…

Classifier-Free Guidance (CFG) Scale in Stable Diffusion

1.Classifier-Free Guidance Scale in Stable Diffusion 笔记来源&#xff1a; 1.How does Stable Diffusion work? 2.Classifier-Free Diffusion Guidance 3.Guide to Stable Diffusion CFG scale (guidance scale) parameter 1.1 Classifier Guidance Scale 分类器引导是…

达梦数据库的系统视图v$dict_cache_item

达梦数据库的系统视图v$dict_cache_item 在达梦数据库&#xff08;DM Database&#xff09;中&#xff0c;V$DICT_CACHE_ITEM 是一个系统视图&#xff0c;用于显示字典缓存&#xff08;Dictionary Cache&#xff09;中的项信息。字典缓存是数据库中的一个重要组件&#xff0c;…

RepLKNet(CVPR 2022, MEGVII)

paper&#xff1a;Scaling Up Your Kernels to 31x31: Revisiting Large Kernel Design in CNNs official implementation&#xff1a;https://github.com/DingXiaoH/RepLKNet-pytorch 背景 卷积神经网络&#xff08;CNN&#xff09;曾经是现代计算机视觉系统中的常见选择。…

Golang | Leetcode Golang题解之第231题2的幂

题目&#xff1a; 题解&#xff1a; func isPowerOfTwo(n int) bool {const big 1 << 30return n > 0 && big%n 0 }