Element-UI使用el-calendar显示工作日

已于 2024-04-10 10:33:52 修改
阅读量720 收藏 1
点赞数
文章标签： ui vue.js javascript
于 2023-11-21 14:26:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41264896/article/details/134530774
版权 
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .DateBox {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            height: 100%;
            background-color: yellowgreen;
            color: white;
        }

        /*不是指定日期月份不允许点击*/
        .el-calendar-table:not(.is-range) td.next,
        .el-calendar-table:not(.is-range) td.prev {
            pointer-events: none;
        }

        .el-calendar-table:not(.is-range) td.next .DateBox,
        .el-calendar-table:not(.is-range) td.prev .DateBox {
            color: #c0c4cc;
            background-color: white;
        }

        .el-calendar-table thead th {
            color: black;
            background-color: white;
        }

        .IsSelected {
            background-color: red;
        }
        th {
            text-align: center;
            font-size: 24px;
        }

        .el-calendar-table thead th::before {
            content: '星期';
        }
    </style>
</head>

<body>
    <div id="app" style="width: 100%;">
        <span>请选择日期：</span>
        <el-date-picker v-model="dateValue1" type="date" placeholder="选择日期">
        </el-date-picker>
        <el-calendar v-model="dateValue1">
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template slot="dateCell" slot-scope="{date, data}">
                <div :id="data.day" class="DateBox" @click="AddDate(data)" @dblclick="DelDate(data)"
                    :class="BgIsSelected(data,dateData)?'IsSelected':''">
                    <span style="font-size: 30px;" @click="AddDate(data)" @dblclick="DelDate(data)">{{
                        data.day.split('-')[2]}}日</span>&nbsp;
                    <span style="position: absolute;top: 0;left: 0;font-size:x-small;vertical-align: sub;"
                        @click="AddDate(data)" @dblclick="DelDate(data)"> {{
                        data.day.split('-')[1]}}月</span>
                </div>
            </template>
        </el-calendar>
        <p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
            鼠标单击日历单元格为选中日期，鼠标双击单元为取消选中。
        </p>
    </div>
    <script>
        var _this = new Vue({
            el: "#app",
            data: {
                dateData: [
                    {
                        "ID": "20231101",
                        "Dates": "2023-11-01 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231102",
                        "Dates": "2023-11-02 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231103",
                        "Dates": "2023-11-03 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231106",
                        "Dates": "2023-11-06 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231107",
                        "Dates": "2023-11-07 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231108",
                        "Dates": "2023-11-08 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231109",
                        "Dates": "2023-11-09 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231110",
                        "Dates": "2023-11-10 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231113",
                        "Dates": "2023-11-13 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231114",
                        "Dates": "2023-11-14 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231115",
                        "Dates": "2023-11-15 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231116",
                        "Dates": "2023-11-16 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231117",
                        "Dates": "2023-11-17 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231120",
                        "Dates": "2023-11-20 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231121",
                        "Dates": "2023-11-21 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231122",
                        "Dates": "2023-11-22 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231123",
                        "Dates": "2023-11-23 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231124",
                        "Dates": "2023-11-24 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231127",
                        "Dates": "2023-11-27 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231128",
                        "Dates": "2023-11-28 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231129",
                        "Dates": "2023-11-29 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    },
                    {
                        "ID": "20231130",
                        "Dates": "2023-11-30 00:00:00",
                        "Years": "2023",
                        "Months": "11"
                    }
                ],
                isDisabled: false,
                dateValue1: '2023-11-01',
                dateValue2: '2023-11-01',
            },
            methods: {
            //判断日期是否在数组中，便于显示背景颜色
                BgIsSelected: (data, dateData) => {
                    if (dateData.some(x => /\d{4}-\d{1,2}-\d{1,2}/.exec(x.Dates)[0] === data.day)) {
                        return true;
                    }
                    return false;
                },
                //添加日期
                AddDate: (data) => {
                    //判断是否存在相同元素
                    //数据库读取的日期后边跟着00:00:00
                    if (_this.dateData.some(x => /\d{4}-\d{1,2}-\d{1,2}/.exec(x.Dates)[0] === data.day)) {
                        return;
                    }
                    var date = data.day.split('-')
                    //以下替换结果相同
                    //'2023-01-03'.split('-').join('')
                    //'2023-01-03'.replaceAll('-', '')
                    _this.dateData.push({ ID: data.day.replaceAll('-', ''), Dates: data.day, Years: date[0], Months: date[1], Days: date[2] });
                },
                //删除日期
                DelDate: (data) => {
                    _this.dateData = _this.dateData.filter(item => /\d{4}-\d{1,2}-\d{1,2}/.exec(item.Dates)[0] !== data.day);
                },
            },
            created() {
            }
        });
    </script>
</body>

</html>

效果

在这里插入图片描述

三分藏道
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-calendar自定义日程，显示文字内容，el-date-picker和el-calendar互动互联
weixin_41346436的博客
05-13 674
效果展示首先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-calendar 日程添加
qq_38095257的博客
11-19 1803
<el-calendar> <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--> <template slot="dateCell" slot-scope="{ data }"> <div class="data.isSelected ? '.
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
elementui 日历组件el-calendar使用总结
最新发布
秋实的博客
07-15 1132
自定义elementui日历组件
element日历calendar组件上月、今天、下月、日历块点击事件及模板
10-15
主要介绍了element日历calendar组件上月、今天、下月、日历块点击事件及模板源码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+elementUI实现简单日历功能
10-14
主要为大家详细介绍了vue+elementUI实现简单日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
elementUi 自定义一个日历
qq_43807473的博客
04-25 760
elementUi自定义一个日历，修改样式
element-----el-calendar 使用自定义内容标记
weixin_45102212的博客
03-24 1113
项目中需求是展示讲师课程时间： 代码部分：根据后台返回去对比判断：当status=1.就是有课，2是就是没课程 <template> <el-calendar id="calendar" v-model="value"> <template slot="dateCell" slot-scope="{ date, data }"> <!-- 获取日历日期全展示年月日 data.day.split("-") .slice(1).join("-"
element-ui 限制日期选择的方法(datepicker)
08-27
在 Element-UI 中，我们可以使用 picker-options 中的 disableDate 属性来实现日期选择器的限制日期选择。 首先，我们需要了解 Element-UI 日期选择器的基本用法。 Element-UI 日期选择器提供了多种类型的日期选择...
element-plus的el-calendar日历组件使用#date-cell插槽踩坑不生效
weixin_50041614的博客
11-03 3392
element-plus的el-calendar日历组件使用#date-cell插槽踩坑不生效
vue实现日历表格（element-ui）
01-18
本文实例为大家分享了vue实现... <span class=calendar-left click=lastDateclick>< <span class=calendar-center>近期事件 <span class=calendar-right click=nextDateclick>> <el-table ref=tablet :data=
可以进行工作日设定的日历
01-24
可以进行工作日设定的日历，前台jsp，与博客中的后台可以完成将日期存入数据库
django和element-ui </el-calendar>
02-07
Django是一个开源的Web框架，基于Python语言，用于快速开发高效网站。它提供了许多功能，如ORM、模板系统、管理界面等。... <el-calendar> 是 Element-UI 中的日历组件，可以用来显示日历并进行相关操作。
js实现日期农历与公历的互转
xi_nuo的博客
12-06 1899
使用年限：1900-2100 使用场景1：vue项目 js引入：import calendar from '../../utils/calendar.js' 方法调用： getNowDate(){ var nowDate = new Date() // 输入公历年月日，得出农历信息 var nongliStr = calendar.calendarFormatter.sol...
使用vue+element-ui实现移动端每日报工日历
weixin_43777007的博客
03-20 1370
实现思路： 1、将日历分为四个部分： 1）日历中要显示的上个月日期部分 2）当月到当天的日期部分 3）当月当前之后的部分(为了实现点击无操作) 4）日历中要显示的下个月日期部分 2、日历的操作： 1）点击上个月日期进入到上个月日历。 2）（当月)点击到当前日期之前的显示当天的报工信息、 (当月之前)点击任意七日都可显示当天的报工信息 3）当月之后不可操作。 4）节假日、休息日点击显示休息日。 **注意：不支持年切换，只允许对当前年份进行操作 <template> <div class=
element ui el-calendar日历组件使用总结
热门推荐
欧阳的技术博客
05-04 1万+
element ui + vue el-calendar日历组件使用总结
Element UI 自定义日历
Cookie686的博客
05-05 1159
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Element UI 自定义日历代码示例HTML部分js部分 代码示例 HTML部分 <template> <el-calendar ref="calendar"> <template #header="{ date }"> <div style="background: #0c2035; width: 100%"> .
el-calendar 自定义我的日程
CRMEB小程序商城的博客
11-10 1822
虽然el-calendar的自定义样式整体的难度较低,但是处理数据还是比较麻烦,最好与后端商量,返回比较合理的数据,是优化el-calendar的重点
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值