element plus 日期范围 自定义内容

问题:
按照官网上的自定义内容示例,修改日期选择器没有问题,如果修改日期范围选择器,修改后会丢失日期范围选择时的样式。

解决:
从F12中不难看出日期范围的选择样式来自于.el-date-table-cell
在这里插入图片描述
而示例中写的是.cell,所以只需改一下class,再在示例代码的基础上稍作修改就可以了

请添加图片描述

附:示例代码

<template>
  <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-value="[new Date(2021, 10, 1), new Date(2021, 11, 1)]"
  >
    <template #default="cell">
      <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
        <span class="el-date-table-cell__text">{{ cell.text }}</span>
        <span v-if="isHoliday(cell)" class="holiday"/>
      </div>
    </template>

  </el-date-picker>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const value = ref('')

const holidays = [
  '2021-10-01',
  '2021-10-02',
  '2021-10-03',
  '2021-10-04',
  '2021-10-05',
  '2021-10-06',
  '2021-10-07',
]

const isHoliday = ({dayjs}) => {
  return holidays.includes(dayjs.format('YYYY-MM-DD'))
}


</script>
<style scoped>
.holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++11特性:可调用对象以及包装器function的使用

在C中存在“可调用对象”这么一个概念。准确来说&#xff0c;可调用对象有如下几种定义&#xff1a; 是一个函数指针&#xff1a; int print(int a, double b) {cout << a << b << endl;return 0; } // 定义函数指针 int (*func)(int, double) &print…

[Linux] LVS负载均衡群集——DR模式

一、 DR模式的特点 直接路由&#xff1a; 在LVS_DR模式下&#xff0c;负载均衡器不修改数据包的IP地址&#xff0c;只修改目的MAC地址。这使得数据包可以直接路由到后端实际服务器上&#xff0c;而不需要返回到负载均衡器。 高性能&#xff1a; 由于数据包在传输过程中不需要回…

生物识别规划人脸识别方案的概述和特点

方案概述 人脸识别方案采用高性能AI芯片&#xff0c;支持RGB和IR摄像头&#xff0c; 支持LCD显示屏。 方案特点 • 普通RGB摄像头和IR摄像头同时参与3D成像RGB摄像头 支持屏幕回显 • 双目摄像头得到特征点视差计算人脸相 对3D深度信息&#xff0c; 同时利用可见光和红外 光…

【数据结构】树状数组算法总结

知识概览 树状数组有两个作用&#xff1a; 快速求前缀和 时间复杂度O(log(n))修改某一个数 时间复杂度O(log(n)) 例题展示 1. 单点修改&#xff0c;区间查询 题目链接 活动 - AcWing本活动组织刷《算法竞赛进阶指南》&#xff0c;系统学习各种编程算法。主要面向…

[极客大挑战 2019]Havefun1

1.别的博主写的非常好&#xff0c;我就不重复造轮子了 一位优秀师傅写的&#xff1a;https://blog.csdn.net/HackerQY/article/details/128503805

音频格式如何转为mp3?

音频格式如何转为mp3&#xff1f;各种各样的音频是在现代生活中肯定会接触到的&#xff0c;音频不仅能够让我们娱乐&#xff0c;也可以在办公和学习中使用&#xff0c;而且音频的格式非常多种多样&#xff0c;但不同的格式有不同的优缺点&#xff0c;例如兼容性问题&#xff0c…

沙盘模型3D打印加工服务建筑设计模型3D打印展览展示模型3D打印-CASAIM

随着3D打印技术的不断发展&#xff0c;沙盘模型3D打印已经成为建筑行业中的一项创新应用。这种技术能够将设计师的创意以实体形式呈现&#xff0c;为建筑项目的沟通和展示提供了更加直观和便捷的方式。本文将介绍CASAIM沙盘模型3D打印的优势和应用。 一、CASAIM沙盘模型3D打印的…

【MATLAB源码-第101期】基于matlab的蝙蝠优化算BA)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 蝙蝠算法&#xff08;BA&#xff09;是一种基于群体智能的优化算法&#xff0c;灵感来源于蝙蝠捕食时的回声定位行为。这种算法模拟蝙蝠使用回声定位来探测猎物、避开障碍物的能力。在蝙蝠算法中&#xff0c;每只虚拟蝙蝠代表…

解决Visual Studio 各版本都出现新建项目后解决方案下没有文件和项目问题

一步一步创建C#控制台应用程序也会出错&#xff0c;这个你可能不会相信&#xff0c;我就遇到了这么一次&#xff0c;就在刚刚&#xff0c;是的&#xff0c;我都不敢相信&#xff0c;用了这么多年的新建一个控制台程序居然不正常了。新建完毕发现里面什么都没有&#xff0c;除了…

代码生成器底层原理:模板框架freemarker

1.按照设置好的模板文件就能生成Java&#xff0c;vue文件&#xff0c;前后端都可生成。 2.也可以进行复杂Excel到处&#xff1a;可以转成xml&#xff0c;用xml来制作模板&#xff0c;在生成excel 3.需要批量生成格式固定的一类文件的需求也可以使用模板框架freemarker 首先引…

四十四、Redis的数据持久化(RDB、AOF)

目录 一、定义 二、RDB 1、默认方案&#xff1a; 2、bgsave方案&#xff1a; 3、bgsave的基本流程&#xff1a; 4、RDB会在什么时候执行&#xff1f;save 60 1000代表什么含义&#xff1f; 5、RDB的缺点&#xff1a; 三、AOF 1、定义&#xff1a; 2、流程&#xff1a;…

【深度学习】Sentence Embedding-BERT-Whitening

前言 flow模型本身很弱&#xff0c;BERT-flow里边使用的flow模型更弱&#xff0c;所以flow模型不大可能在BERT-flow中发挥至关重要的作用。反过来想&#xff0c;那就是也许我们可以找到更简单直接的方法达到BERT-flow的效果。 BERT-whitening则认为&#xff0c;flow模型中涉及到…

ChatGPT引领AI时代:程序员、项目经理、产品经理、架构师、Python量化交易师的翅膀

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在当今AI时代&#xff0c;ChatGPT作为一项卓越…

三本光电从颓废到武汉年薪30w的本科经历经验与浅谈(毕业工作一年的嵌入式软件工程师经验分享)

三本光电从颓废到武汉年薪30w的本科经历经验与浅谈&#xff08;毕业工作一年的嵌入式软件工程师经验分享&#xff09; 文章目录 目前情况颓废时期项目时期第一次写单片机代码第一次接触计算机视觉第一次接触Linux驱动开发第一次接触FPGA和Verilog HDL第一次开发STM32创新实践及…

将yolo格式转化为voc格式:txt转xml(亲测有效)

1.文件目录如下所示&#xff1a; 对以上目录的解释&#xff1a; 1.dataset下面的image文件夹&#xff1a;里面装的是数据集的原图片 2.dataset下面的label文件夹&#xff1a;里面装的是图片对应得yolo格式标签 3.dataset下面的Annotations文件夹&#xff1a;这是一个空文件夹&…

自动驾驶技术入门平台分享:百度Apollo开放平台9.0全方位升级

目录 平台全方位的升级 全新的架构 工具服务 应用软件&#xff08;场景应用&#xff09; 软件核心 硬件设备 更强的算法能力 9.0版本算法升级总结 更易用的工程框架 Apollo开放平台9.0版本的技术升级为开发者提供了许多显著的好处&#xff0c;特别是对于深度开发需求…

Pycharm中如何使用Markdown?只需装这个插件!

一、前言 由于Markdown的轻量化、易读易写特性&#xff0c;并且对于图片&#xff0c;图表、数学式都有支持&#xff0c;许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等…

什么是低代码(Low-code) 低代码开发平台特点-优势介绍

随着数字化转型的加速&#xff0c;越来越多的企业开始认识到应用开发的重要性。然而&#xff0c;传统的应用开发方式往往需要耗费大量的时间和资源&#xff0c;而且开发周期长&#xff0c;难以满足企业的快速需求。在这样的背景下&#xff0c;Low Code Platform(低代码平台)应运…

windows10 固定电脑IP地址操作说明

windows10 固定电脑IP地址操作说明 一、无线网络的IP地址设置方法二、有线网络的IP地址设置方法 本文主要介绍&#xff0c;windows10操作系统下&#xff0c;不同的网络类型&#xff0c;对应的电脑IP地址设置方法。 一、无线网络的IP地址设置方法 在桌面右下角&#xff0c;点击…

OpenHarmony鸿蒙原生应用开发,ArkTS、ArkUI学习踩坑学习笔记,持续更新中。

一、AMD处理器win10系统下&#xff0c;DevEco Studio模拟器启动失败解决办法。 结论&#xff1a;在BIOS里面将Hyper-V打开&#xff0c;DevEco Studio模拟器可以成功启动。 二、ArkTS自定义组件导出、引用实现。 如果在另外的文件中引用组件&#xff0c;需要使用export关键字导…