VUE3 Element-Plus el-calenda工作日显示

最新推荐文章于 2024-05-30 16:07:04 发布
最新推荐文章于 2024-05-30 16:07:04 发布
阅读量756 收藏 24
点赞数 15
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41264896/article/details/137072703
版权

el-calenda工作日显示

原生自定义

<template>
    <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 #date-cell="{ 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: 楷体;">
        1、鼠标单击日历单元格为选中日期,鼠标双击单元为取消选中。
    </p>
    <p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
        2、选中的日期只能是一个月的,不能跨月选择,最终保留的数据月份以日期选择器的日期年月为基准；
        编辑的数据不会以日期选择器的为主，保存的数据以选中记录的年月日为主。
    </p>
    <p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
        3、选择完成记得点击保存,否则操作不会自动保存到数据库。
    </p>
</template>
<script setup>
import { ref, watch } from 'vue';
import { dayjs } from 'element-plus'
const dateData = ref([
    {
        "ID": "20231101",
        "Dates": "2023-11-01 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231102",
        "Dates": "2023-11-02 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231103",
        "Dates": "2023-11-03 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231106",
        "Dates": "2023-11-06 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231107",
        "Dates": "2023-11-07 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231108",
        "Dates": "2023-11-08 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231109",
        "Dates": "2023-11-09 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231110",
        "Dates": "2023-11-10 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231113",
        "Dates": "2023-11-13 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231114",
        "Dates": "2023-11-14 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231115",
        "Dates": "2023-11-15 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231116",
        "Dates": "2023-11-16 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231117",
        "Dates": "2023-11-17 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231120",
        "Dates": "2023-11-20 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231121",
        "Dates": "2023-11-21 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231122",
        "Dates": "2023-11-22 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231123",
        "Dates": "2023-11-23 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231124",
        "Dates": "2023-11-24 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231127",
        "Dates": "2023-11-27 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231128",
        "Dates": "2023-11-28 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231129",
        "Dates": "2023-11-29 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    },
    {
        "ID": "20231130",
        "Dates": "2023-11-30 00:00:00",
        "Years": "2023",
        "Months": "11",
        "Confirms": 1,
    }
]);
const dateValue1 = ref(new Date('2023-11-01'));
const dateValue2 = ref(new Date('2023-11-01'));

const 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;
}
//添加日期
const AddDate = (data) => {
    //判断是否存在相同元素
    //数据库读取的日期后边跟着00:00:00
    if (dateData.value.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('-', '')
    dateData.value.push({ ID: data.day.replaceAll('-', ''), Dates: data.day, Years: date[0], Months: date[1], Days: date[2] });
}
//删除日期
const DelDate = (data) => {
    //数据库读取的日期后边跟着00:00:00
    dateData.value = dateData.value.filter(item => /\d{4}-\d{1,2}-\d{1,2}/.exec(item.Dates)[0] !== data.day);
}
//过滤整合日期
const handleDateData = () => {
    //截取日期
    var data1 = dateValue2.split('-')
    if (data1.length > 0) {
        //安年过滤
        var data2 = dateData.value.filter(item => item.Years === data1[0]);
        //按月过滤
        var data3 = data2.filter(item => item.Months === data1[1]);
    }
    if (data3.length > 0) {
        //构建sql
        var sql = "INSERT INTO T_GXR(ID, Dates, Years, Months, Confirms) VALUES";
        //赋值SQL值
        data3.forEach(item => {
            sql += "(''" + item.ID + "'',''" + item.Dates + "'',''" + item.Years + "'',''" + item.Months + "''),";
        })
        //去掉最后是逗号
        var newSql = sql.slice(0, -1);
        //附加分号
        newSql += ";";
        return [newSql, data3[0].Years, data3[0].Months];
    }
    return '';
}


watch(dateValue1, (newVal, oldVal) => {
    console.log(newVal.toLocaleDateString(), oldVal.toLocaleDateString())
})
</script>
<style scoped>
.DateBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: yellowgreen;
    color: white;
}

/*不是指定日期月份不允许点击*/
:deep(.next) {
    pointer-events: none;
}

:deep(.prev) {
    pointer-events: none;
}

.next .DateBox,
.prev .DateBox {
    color: #c0c4cc;
    background-color: white;
}

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

.IsSelected {
    background-color: red;
}
</style>

在这里插入图片描述

使用chinese-workday

<template>
    <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 #date-cell="{ data }">
            <!--节假日版-->
            <div class="DateBox" :class="isWorkday(data.day) ? 'IsSelected' : ''">
                <span style="font-size: 30px;">
                    {{ dayjs(data.day).format('DD') }}日</span>
                <span style="position: absolute;top: 0;left: 0;font-size:x-small;vertical-align: sub;">
                    {{ dayjs(data.day).format('MM') }}月</span>
                <span style="position: absolute;bottom: 0;right: 0;font-size:x-small;vertical-align: sub;">
                    {{ getFestival(data.day) }}</span>
            </div>
        </template>
    </el-calendar>
    <p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
        1、鼠标单击日历单元格为选中日期,鼠标双击单元为取消选中。
    </p>
    <p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
        2、选中的日期只能是一个月的,不能跨月选择,最终保留的数据月份以日期选择器的日期年月为基准；
        编辑的数据不会以日期选择器的为主，保存的数据以选中记录的年月日为主。
    </p>
    <p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
        3、选择完成记得点击保存,否则操作不会自动保存到数据库。
    </p>
</template>
<script setup>
import { ref, watch } from 'vue';
import { dayjs } from 'element-plus'
//节假日工具
//yarn add chinese-workday
import { isWorkday, getFestival } from 'chinese-workday'
const dateValue1 = ref(new Date('2023-11-01'))
watch(dateValue1, (newVal, oldVal) => {
    console.log(newVal.toLocaleDateString(), oldVal.toLocaleDateString())
})
</script>
<style scoped>
.DateBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: yellowgreen;
    color: white;
}

/*不是指定日期月份不允许点击*/
:deep(.next) {
    pointer-events: none;
}

:deep(.prev) {
    pointer-events: none;
}

.next .DateBox,
.prev .DateBox {
    color: #c0c4cc;
    background-color: white;
}

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

.IsSelected {
    background-color: red;
}
</style>

在这里插入图片描述

三分藏道
关注
  • 15
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
vue3.2+element-plus+ts节假日管理界面
weixin_46951831的博客
03-15 1767
由于element-plus原生的el-calendar 样式不太好看 所以在实际项目重新写了下节假日管理的页面;用到的有vue3.2+element-plus+ts
element-plus日期选择器如何同时为后端提供开始和结束时间
weixin_43273592的博客
07-03 661
使用v-model双向绑定一个数据,在这里我是用的vue3,定义的form里的chooseTime..这样我们就会获取到一个数组，包含了开始时间和结束时间,可以接下来的处理..定义并监听一下change事件“changeChoose”以及开始时间startTime和结束时间endTime。
vue3+＜script setup＞+element-plus中Calendar 日历打点
m0_59642018的博客
04-07 297
方法中判断日期是否需要打点，并设置相应的样式。这样就可以在 Element Plus 的 Calendar 组件中实现日历打点的效果。语法来编写逻辑部分，通过。在这个示例中，我们使用了。
el-calendar日历组件的一些项目中实际应用（给每一天增加可输入的input框、计算每天数据总和、填写月合计后计算平均数同步到每一天中、做日期限制禁用规则等）
vvv3171071的博客
04-21 2648
这篇文章用来分享自己项目中做el-calendar日历组件封装时的一些实用功能和踩的一些坑吧，毕竟ElementUI官方文档上对这个组件的描述实在太少了。 1、给每一天增加可输入的input框 其实这个功能在官方文档上基本已经实现了（在“自定义内容”那一块），直接在slot插槽里再加个input即可。 <el-calendar v-model="calendarDate"> <template slot="dateCell" slot-scope="{ da
Vue3+Element-Plus || el-calendar考勤日历
weixin_45862553的博客
02-02 2809
日历放在#header插槽内，额外内容放在#date-cell插槽内
基于 vue-element-admin 升级的 Vue 3 + TypeScript + Element-Plus 版本后台管理系统正式开源
热门推荐
有来技术
05-01 4万+
项目基于vue-elemnent-admin升级的Vue3版本,代码结构基本和vue-element-admin一致，代码风格参考Vue.js社区，CSS遵守BEM规范 ，站在巨人的肩膀不仅是为了看的更远，更多的是一种致敬、延续和希望走的更远。
Vue3 Element-plus el-menu无限级菜单组件封装
^_^
04-14 3853
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装
vue3 element-plus el-date-picker设置默认值
anwenagululu的博客
09-26 2422
vue3 element-plus el-date-picker设置默认值
vue3使用element-plus及其icon
Y_soybean_milk的博客
05-05 4634
element-plus 1、安装依赖包 npm install element-plus --save 2、在main.js中引入并注册 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/in
vue3 element-plus el-tree自定义图标
wanglj7525的专栏
11-02 5224
<el-tree :data="treeData.data" node-key="id" :props="defaultProps" :default-expanded-keys="[0]" @node-click="handleNodeClick" > <template #default="scope"> <div class="custom-node"> <i class="tr.
vue3.0 element-plus el-table层级嵌套问题
qq_17686345的博客
06-11 1849
在自定义封装element-plus el-table组件时，偶然发现会提示这样的错误 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug 导致列表数据无法切换问题，经过排查可能是因为封装的层级过深的问题 将代码调整一下 调整前 调整后 ...
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
vue-element-plus-admin:一套基于vue3，element-plus，typesScript，vue-cli4的后台集成方案
03-29
介绍是一个基于 ， ， ， 的后台解决方案，已经解决了和的写法和优点。内置了动态路由，权限验证，，典型的业务模型，丰富的功能组件，并提供了多页配置，开箱即用，可以用作项目的启动模版。它可以帮助您快速构建...
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 :red_apple: 尝试 $ git clone https://github.com/ntnyq/element-plus-admin.git $ cd element-plus-admin $ npm...
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 319
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 390
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
【开源】渔具租赁系统 JAVA+Vue.js+SpringBoot+MySQL
最新发布
as230627的博客
05-30 945
Vue.js+SpringBoot前后端分离新手入门项目《渔具租赁系统》，包括渔具档案模块、渔具租赁模块、渔具归还模块、在线留言模块和部门角色菜单模块，项目编号T005。
vue3 element-plus el-table formatter
10-20
在Vue3和Element Plus中，el-table是一个常用的表格组件，可以用于展示数据。而formatter是el-table-column组件的一个属性，用于对表格中的内容进行格式化。在引用中，使用了v-html指令和resultFormat方法对校核结果进行格式化；在引用中，使用了formatter属性对测试1和测试2的内容进行格式化；在引用中，定义了resultFormat方法，用于将校核结果的数字值转换为对应的文字描述，并且在值不为0时添加了一个warning类的span标签来标识校核结果的状态。通过使用formatter属性和自定义方法，我们可以对表格中的内容进行灵活的格式化，以满足不同的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值