利用el-calendar来实现日期的选中与设置

前段时间利用el-calendar做了一个设置节假日的功能，由此来记录一下。话不多说，直接开搞------->

先看一下整体效果吧：

设置节假日的弹窗效果：

以下是所有代码，下面再一点点讲讲：

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true"><el-form-item label="年份" prop="holidayYear"><el-date-pickerv-model="queryParams.holidayYear"type="year" :clearable="false"placeholder="选择年"></el-date-picker></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row><div  v-for="cal in defaultCals" @click="handleUpdateHoliday(cal)"><el-col :span="6"><el-calendar :value="cal" class="holiday"><template slot="dateCell" slot-scope="{date, data}" class="temp-mt"><div class="holiday-cell" v-show="data.type === 'current-month'" :id="cal.getMonth()+'-'+data.day">{{ data.day.split('-')[2] }}</div></template></el-calendar></el-col></div></el-row><el-dialog title="节假日设置" :visible.sync="show" width="40%"><el-calendar :value="currentMonth" class="select-month"><!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--><template slot="dateCell" slot-scope="{date, data}" class="temp-mt"><div class="holiday-cell" v-show="data.type === 'current-month'" @click="selectDate(date,data)"><span>{{ data.day.split('-')[2] }}</span><span :id="data.day">{{ initHolidayDate(data) }}</span></div></template></el-calendar><span slot="footer" class="dialog-footer"><el-button @click="show = false">取 消</el-button><el-button type="primary" @click="submitHoliday">确 定</el-button></span></el-dialog></div>
</template><script>export default {name: "temp",data() {return {queryParams:{holidayYear: new Date()},//设置的月份defaultCals:[],// 全年已选中的日期holidayDate:[],// 弹框show: false,// 点击修改的月份currentMonth: undefined,// 点击月中已选中的日期currentDate:[],}},created() {//初始化日历let nowYear = new Date().getFullYear();this.initCalendar(nowYear);},methods:{//初始化日历initCalendar(year){this.defaultCals = [new Date(year,0,1),new Date(year,1,1),new Date(year,2,1),new Date(year,3,1),new Date(year,4,1),new Date(year,5,1),new Date(year,6,1),new Date(year,7,1),new Date(year,8,1),new Date(year,9,1),new Date(year,10,1),new Date(year,11,1)];//调接口获取this.holidayDate = [{day: 2,date: "0-"+year+"-01-02"},{day: 2,date: "1-"+year+"-02-02"},{day: 2,date: "2-"+year+"-03-02"}];this.$nextTick(() => {let holidayCell = document.getElementsByClassName('holiday-cell');for (let i in holidayCell) {if(undefined != holidayCell[i].style){holidayCell[i].style.backgroundColor = '#FFFFFF';}}//给已选中的日期加背景色for (let i in this.holidayDate) {let span = document.getElementById(this.holidayDate[i].date);span.style.backgroundColor = '#F56C6C';}});},/** 搜索按钮操作 */handleQuery() {let year = this.queryParams.holidayYear.getFullYear();this.initCalendar(year);},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.queryParams.holidayYear = new Date();this.handleQuery();},//初始化已选中的日期initHolidayDate(data){for (let i in this.currentDate) {if(data.day === this.currentDate[i].date){data.isSelected = true;return '✔️'}}},//节假日设置handleUpdateHoliday(cal){this.show = true;this.currentMonth = cal;//调接口获取this.currentDate = [{day: 2,date: cal.getFullYear()+"-01-02"}];},selectDate(date, data) {let day = date.getDate();let span = document.getElementById(data.day);if (span.innerText) {span.innerText = ''for (let i in this.currentDate) {if(day === this.currentDate[i].day){this.currentDate.splice(i,1)}}} else {span.innerText = '✔️';this.currentDate.push({day: day,date: data.day})}},//提交submitHoliday(){console.log(this.currentMonth,this.currentDate);this.show = false;this.queryParams.holidayYear = this.currentMonth;this.handleQuery();},}
}
</script><style>
.holiday .el-calendar__button-group{display: none;
}.select-month .el-calendar__button-group{display: none;
}.holiday .el-calendar-day{padding: 1px;width: 100%;height: 34px;
}.select-month .el-calendar-day{padding: 1px;width: 100%;
}.holiday-cell{width: 100%;height: 100%;display:flex;justify-content: center;align-items: center;
}
</style>

下面进行代码的讲解--------->

首先是搜索条件：这里只用了一个条件，有需要的可以自行添加

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true"><el-form-item label="年份" prop="holidayYear"><el-date-pickerv-model="queryParams.holidayYear"type="year" :clearable="false"placeholder="选择年"></el-date-picker></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item>
</el-form>

其次是页面啦，其中有一点要注意的就是class='holiday-cell’的div了，这里我设置了id，具体格式
M-yyyy-MM-dd,即月份的值（0~11）拼接一个年月日的格式

<el-row><div  v-for="cal in defaultCals" @click="handleUpdateHoliday(cal)"><el-col :span="6"><el-calendar :value="cal" class="holiday"><template slot="dateCell" slot-scope="{date, data}" class="temp-mt"><div class="holiday-cell" v-show="data.type === 'current-month'" :id="cal.getMonth()+'-'+data.day">{{ data.day.split('-')[2] }}</div></template></el-calendar></el-col></div>
</el-row>

然后就是设置的弹窗，可以看到这里面span也有个id他的值就是一个年月日格式的字符串，具体可以查看Element-ui官网中关于el-calendar的介绍

<el-dialog title="节假日设置" :visible.sync="show" width="40%"><el-calendar :value="currentMonth" class="select-month"><!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--><template slot="dateCell" slot-scope="{date, data}" class="temp-mt"><div class="holiday-cell" v-show="data.type === 'current-month'" @click="selectDate(date,data)"><span>{{ data.day.split('-')[2] }}</span><span :id="data.day">{{ initHolidayDate(data) }}</span></div></template></el-calendar><span slot="footer" class="dialog-footer"><el-button @click="show = false">取 消</el-button><el-button type="primary" @click="submitHoliday">确 定</el-button></span>
</el-dialog>

关于script：

data() {return {//查询条件，默认当前年queryParams:{holidayYear: new Date()},//默认的1~12月defaultCals:[],// 全年已选中/已设置的日期holidayDate:[],// 弹框show: false,// 要修改/设置的月份currentMonth: undefined,// 已选中的日期currentDate:[],}},created() {//初始化日历，展示当前年的1~12月let nowYear = new Date().getFullYear();this.initCalendar(nowYear);},methods:{//初始化日历initCalendar(year){this.defaultCals = [new Date(year,0,1),new Date(year,1,1),new Date(year,2,1),new Date(year,3,1),new Date(year,4,1),new Date(year,5,1),new Date(year,6,1),new Date(year,7,1),new Date(year,8,1),new Date(year,9,1),new Date(year,10,1),new Date(year,11,1)];//这里需要调后台接口获取全年已设置的日期，我这里给了三个默认值，其中day表示几号，date表示选中的日期，格式就是上面div的idthis.holidayDate = [{day: 2,date: "0-"+year+"-01-02"},{day: 2,date: "1-"+year+"-02-02"},{day: 2,date: "2-"+year+"-03-02"}];this.$nextTick(() => {let holidayCell = document.getElementsByClassName('holiday-cell');//先给所有的日期小格子设置成白色for (let i in holidayCell) {if(undefined != holidayCell[i].style){holidayCell[i].style.backgroundColor = '#FFFFFF';}}//再给已选中的日期加背景色for (let i in this.holidayDate) {let span = document.getElementById(this.holidayDate[i].date);span.style.backgroundColor = '#F56C6C';}});},/** 搜索按钮操作 */handleQuery() {let year = this.queryParams.holidayYear.getFullYear();this.initCalendar(year);},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.queryParams.holidayYear = new Date();this.handleQuery();},/** *************分割线******************///节假日设置handleUpdateHoliday(cal){this.show = true;this.currentMonth = cal;//通过调后台接口获取，与holidayDate对应，这里给了一个一月份的默认值，弹框如上面所示，一月二号格子里有个'✔️'，其中day表示几号，date表示选中的日期，格式就是上面span的idthis.currentDate = [{day: 2,date: cal.getFullYear()+"-01-02"}];},//初始化已选中的日期initHolidayDate(data){for (let i in this.currentDate) {if(data.day === this.currentDate[i].date){data.isSelected = true;return '✔️'}}},//点击选中或取消选中selectDate(date, data) {let day = date.getDate();let span = document.getElementById(data.day);if (span.innerText) {span.innerText = ''for (let i in this.currentDate) {if(day === this.currentDate[i].day){this.currentDate.splice(i,1)}}} else {span.innerText = '✔️';this.currentDate.push({day: day,date: data.day})}},//提交submitHoliday(){//这里调用后台接口存currentMonth和currentMonthconsole.log(this.currentMonth,this.currentMonth);//接口调用成功后重新查询一次，渲染页面this.show = false;this.queryParams.holidayYear = this.currentMonth;this.handleQuery();},},

关于style

<style>
/** 去除自带的 */
.holiday .el-calendar__button-group{display: none;
}.select-month .el-calendar__button-group{display: none;
}.holiday .el-calendar-day{padding: 1px;width: 100%;height: 34px;
}.select-month .el-calendar-day{padding: 1px;width: 100%;
}/** 让每个小个子中的内容居中显示 */
.holiday-cell{width: 100%;height: 100%;display:flex;justify-content: center;align-items: center;
}
</style>

好了，到此便结束了，上面内容中的’✔️’如有需要，可以设置成文字并保存到数据库，这样就可以做一个类似于日志一样的东西了，嘻嘻~

------------------END--------------

利用el-calendar来实现日期的选中与设置相关推荐

黑客组织利用El Machete窃取全球政府超过100G数据
网络间谍活动一直是热议的话题,各类媒体不乏频现各种网络间谍活动,尤其前几年更是"炒得火热".近期,网络间谍活动又"风生水起". 黑客组织利用El Machete ...
将Calendar对象转换为日期时间字符串
应用Calendar类的get()方法,可以获得Calendar对象中的年月日 JavaBean类 public class StringUtil2 { private String dateStr; ...
EL表达式中格式化日期显示
场景在Jsp中通过EL表达式格式化显示日期. 实现在jsp中引入标签: <%@ taglib prefix="fmt" uri="http://java.sun ...
如何利用pandas将时间戳格式化日期字符串呢？
如何利用pandas将时间戳格式化日期字符串呢? 例如:将 1357295797 转为 2013-01-04 10:36:37 #!/usr/bin/python # -*- coding: UTF- ...
Calendar 根据指定日期获取月的第几周
问题:输入时间输出XXXX年X月第X周(自然周) 计算规则:周日在哪个月这周就属于哪个月周日在当月的第几周该周就是当月第几周解决思路:1.计算传入日期所在周的星期日 2.计算周日属于几月第几 ...
利用Java Calendar类打印日历
利用Java Calendar类打印日历说到日历,我们接触的就多了,每天都在和日历打交道,每年家里都会买日历.那么,大家知道如何用Java打印日历呢?在这里,我说一下如何用Calendar类打印日历 ...
利用EL表达式替换回车符
后台数据库中数据格式: 要在页面以如下格式显示,即分号一换行: 首先想到在action中利用replaceAll来替换,于是写出如下代码: userlist.setPubmedmesh(rs.getS ...
利用批处理脚本删除指定日期前文件
利用批处理脚本删除指定日期前文件删除指定日期前文件根据需求可分为两种情况: 一. 以修改时间为准,删除N天之前数据以修改时间为准删除数据脚本很简单,DOS自有命令即可实现: forfiles / ...
calendar类的日期加减
calendar类,日期加减 Java代码 public class test1 { public static void main(String[] args) { Calendar c = Cal ...

利用el-calendar来实现日期的选中与设置

利用el-calendar来实现日期的选中与设置

------------------END--------------

利用el-calendar来实现日期的选中与设置相关推荐

最新文章

热门文章