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

最新推荐文章于 2024-05-30 14:55:35 发布
最新推荐文章于 2024-05-30 14:55:35 发布
阅读量4k 收藏 11
点赞数 2
分类专栏： VUE 文章标签： 前端 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43645266/article/details/126259601
版权

利用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-picker
          v-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-picker
      v-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的id
    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();
  },
  /** *************分割线******************/
  //节假日设置
  handleUpdateHoliday(cal){
    this.show = true;
    this.currentMonth = cal;
    //通过调后台接口获取，与holidayDate对应，这里给了一个一月份的默认值，弹框如上面所示，一月二号格子里有个'✔️'，其中day表示几号，date表示选中的日期，格式就是上面span的id
    this.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和currentMonth
    console.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--------------

RainCityLucky
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-calendar自定义日程，显示文字内容，el-date-picker和el-calendar互动互联
weixin_41346436的博客
05-13 344
效果展示首先el-calendar需要自定义日程内容的话，其格式一般必须满足如下结构{date: '2024-05-08', content: "数学模拟试卷(3)"},{date: '2024-05-08', content: "内容XXXX"},{date: '2024-05-03', content: "内容XXXX"},{date: '2024-05-28', content: "内容XXXX"},结构dom部分-- 日历组件 -->placeholder="选择月"
el+vue 实战 ⑧ el-calendar日历组件设置点击事件、el-calendar日历组件设置高度、el-calendar日历组件自定义日历内部内容
zujiasheng的博客
06-13 1万+
日历显示内容变为01，02的形式，点击相应的日期后，有一个弹出框显示当天完成的一些内容。 ① 其中value在script中定义如下： ② 日历组件的data的结构如下： 弹出框代码如下，ref绑定的名称同上面命名一样即可。 ⑤ 调整日历组件的宽高，样式设置 三、组件整体代码： 四、总结 后面这个再慢慢优化吧，前端属实写着比后端有趣，但是后端提升空间大，钱更多😭.........
element ui el-calendar日历组件完整代码
最新发布
欧阳的技术博客
05-30 679
【代码】element ui el-calendar日历组件完整代码。
js实现日期农历与公历的互转
xi_nuo的博客
12-06 1843
使用年限：1900-2100 使用场景1：vue项目 js引入：import calendar from '../../utils/calendar.js' 方法调用： getNowDate(){ var nowDate = new Date() // 输入公历年月日，得出农历信息 var nongliStr = calendar.calendarFormatter.sol...
VUE+Element-ui实战之el-calendar日历自定义显示内容
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
06-22 1万+
需求说明 添加el-calendar组件 遍历日期，确定显示内容 上月本月点击事件 最终实现效果
自己捣鼓日历选择组件（类似el-calendar）可以单击选则不同日期，也可范围选择日期
weixin_41277748的博客
02-09 4391
日历选择
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
el-calendar-plus.zip
08-30
在技术实现上，el-calendar-plus可能采用了HTML5的新特性，如数据绑定（data attributes）、事件处理（event listeners）以及CSS3的动画效果，来保证组件的性能和交互体验。同时，由于基于Vue.js，它还利用了Vue的...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据当前路由动态...
elementUi vue el-radio 监听选中变化的实例代码
10-16
主要介绍了elementUi vue el-radio 监听选中变化，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-better-calendar:vuejs的日历组件，提供四种日期选择模式（范围选择，多项选择，签入，单选）
05-28
vue-better-calendar A calendar component for vuejs. 关于vue-better-calendar vue-better-calendar是一个基于vue的日期选择插件，它提供了四种日期选择模式（范围选择，多选，签到，单选） 在线示例 安装 使用npm安装 npm install --save vue-better-calendar ES6方式导入 import VueBetterCalendar from 'vue-better-calendar' Vue.use(VueBetterCalendar) 在组件中引入 <vue></vue> 直接连入页面使用 <script src="https://unpkg.com/vue@2.5.16/dist/vue.
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
Vue2+El-Menu 实现路由跳转及当前项的设置方法实例 Vue.js 是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 vue2+...
element ul中el-calendar日历组件自定义快捷选择年月
m0_62823653的博客
10-15 3224
默认选中任意月份，用户可以自由点选日期。以日历形式展现当前页面。
Element-UI使用篇——el-calendar的使用+样式修改集锦
热门推荐
happy81997的博客
09-03 1万+
el-calendar日历组件 写在开头： el-calendar日历组件现在git上很很多别人封装好的组件，可以通过npm install 直接安装使用，效果很好，各种事件响应、样式都很炫，对这个要求功能较多的可以百度下使用。功能需求不复杂的，可以用el-calendar组件即可。 一、样式修改 1、修改整个日历的高度 整日历的高度只能修改到日历列表的单元格大小，才能起作用。 .el-calendar-table .el-calendar-day { height: 30.
使用calendar数据自定义el-calendar日历组件
qq_46344419的博客
12-27 633
使用calendar数据自定义el-calendar日历组件
vue el-Calendar日历使用
weixin_45427607的博客
04-18 3965
效果图 子组件： <template> <div class="dateInfo"> <div class="item"> <span class="day" :show="itemdate.oneDay.length > 0 ? 'show' : false"> {{ itemdate.data.split('-').slice(2).join('-') }} </sp..
【Vue】element el-calendar 日历组件增删改查自定义使用
小胡的博客
04-24 1万+
前段事件用fullcalendar插件做了一个日历，因为和系统框架不一致，改用了element el-calendar 两个插件都实现了所有功能，但总的来说，Fullcalendar好用很多，毕竟文档全，功能也全 如果没有规定一定要用某个插件，推荐使用Fullcalendar，附上官方文档参考 FullCalendar文档：https://fullcalendar.io/ 接下来就是el...
el-calendar 实现自定义日期
03-29
要实现自定义日期，您可以使用el-calendar组件中的属性和方法。下面是一个例子： ```html <el-calendar :range="range" :first-day-of-week="1" @change="handleChange"></el-calendar> export default { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值