ElementPlus-日期选择器实现周选择

ElementPlus的日期选择器实现周选择,并且显示的是日期范围,其效果如下:
在这里插入图片描述

  1. 首先修改中文语言环境,否则日期选择器是从周日开始的。在main.js文件中加上以下代码:
import ElementPlus,{dayjs as elDayjs} from 'element-plus';
import zhCn from "element-plus/es/locale/lang/zh-cn";
elDayjs.locale("zh-cn");
import 'dayjs/locale/zh-cn'

app.use(ElementPlus, {
  locale: zhCn
});
  1. 周选择的代码片段如下
          <el-date-picker
              v-model="date"
              type="week"
              :format="`${startTime} - ${endTime}`"
              placeholder="请选择周"
              @change="handleWeekChange"
          />

js部分的代码如下:

const date = ref();
const startTime = ref();
const endTime = ref();

const handleWeekChange = (value) => {
  if (value) {
    const start = proxy.$dayjs(value).startOf('week').format('YYYY-MM-DD');
    const end = proxy.$dayjs(value).endOf('week').format('YYYY-MM-DD');
    console.log(`周开始时间: ${start}`);
    console.log(`周结束时间: ${end}`);
    startTime.value = start;
    endTime.value = end;
  }
};

备注:
$dayjs方法的使用需要在main.js文件中引入

import { createApp } from 'vue';
// dayjs
import dayjs from 'dayjs';

const app = createApp(App);
app.config.globalProperties.$dayjs = dayjs;

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

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

相关文章

【包邮送书】你好!C语言

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

使用YOLOv9训练和测试自己的数据集

任务&#xff1a;检测舌头上的裂纹和齿痕 已经有了labelme标注的数据集&#xff0c;并且转为了coco格式 参考&#xff1a; 详细&#xff01;正确&#xff01;COCO数据集&#xff08;.json&#xff09;训练格式转换成YOLO格式&#xff08;.txt&#xff09;_coco数据集的train…

【Fiddler抓包工具】第五节.安卓、IOS抓包+fildder插件

文章目录 前言一、HTTPS抓包 1.1 HTTPS与HTTP区别 1.2 HTTPS抓包设置过程 1.3 错误解决方法 1.4 验证证书是否安装成功 1.5 Firefox HTTPS请求捕获二、IOS设备APP抓包 2.1 APP抓包Fiddler设置 2.2 APP抓包IOS设备设置 2.3 And…

拓展虚拟世界边界,云手机可以做到吗

虚拟世界&#xff0c;AI&#xff0c;VR等词汇是21世纪最为流行的词汇&#xff0c;在科技背后&#xff0c;这些词汇的影响变得越来越大&#xff0c;已经走进了人们的世界&#xff0c;比如之前APPLE发布的vision pro&#xff0c;使人们能够更加身临其境的体验到原生os系统&#x…

linux下docker 的使用(2)

上期我们讲了网络&#xff0c;现在来进行最后的 docker的基础内容 java项目的部署 假如说 我们java 项目已经写好了&#xff0c;现在在maven中打包一下我们的项目&#xff0c;然后会得到一个jar包&#xff0c;把jar包 上传到虚拟机上 点击package 命令&#xff0c;会得到一个…

js toFixed()四舍五入丢失精度问题处理

js toFixed()四舍五入丢失精度问题处理 错误展示 看了下lodash的代码&#xff0c;大概是通过使用科学计数法扩大10的n次&#xff0c;将操作数化为整数运算&#xff0c;可以避免精度丢失。 /*** Creates a function like _.round.** private* param {string} methodName The …

艾体宝干货 | 教程:使用ntopng和nProbe监控网络流量

本教程旨在分享如何通过 ntopng 和 nProbe 这两款工具&#xff0c;深入了解和掌握网络流量监控的艺术。我们将提供从基本概念到高级应用的全面指导&#xff0c;涵盖了在多种平台和设备上的部署和配置步骤。不论您是专业人员还是技术爱好者&#xff0c;跟随本教程&#xff0c;都…

IPD管理体系指南

目录 简介 CSDN学院 作者简介 简介 学习任何新的和识或体系&#xff0c;都是需要从这个体影涉及的概念开始的。 IPD 合集也是遵活的这个基础逻辑。 通过 100 例的内容&#xff0c;先将 IPD 涉及到的机含点做了一个统一的梳理。 而本期课程呢&#xff0c;作为IPD 体系的前…

文盘Rust -- 生命周期问题引发的 static hashmap 锁

100编程书屋_孔夫子旧书网 2021年上半年,撸了个rust cli开发的框架,基本上把交互模式,子命令提示这些cli该有的常用功能做进去了。项目地址:https://github.com/jiashiwen/interactcli-rs。 春节以前看到axum已经0.4.x了,于是想看看能不能用rust做个服务端的框架。 春节…

已解决ModuleNotFoundError : No module named ‘pandas亲测有效!!!

已解决ModuleNotFoundError : No module named ‘pandas亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 报错问题解决思路解决方法 报错问题 在运行Python代码时&#xff0c;你可能会遇到以下报错信息&#xff1a; ModuleNotFoundError: No module named pandas这个…

【算法】重建二叉树并进行后序遍历的Java实现

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

[AIGC] Java常用的JSON库及简单示例

Java常用的JSON库及简单示例 在Java的世界里&#xff0c;JSON库广泛用于日常开发工作&#xff0c;本文将介绍几个常用的JSON库并配以简单的示例代码。 1. Gson Gson是Google提供的一个用来在Java对象和JSON数据之间进行转换的Java库。 它有一定的学习曲线&#xff0c;但一旦熟…

两年前的微信聊天记录能恢复吗?正确答案在这里(全)

微信已经成为我们日常沟通中不可或缺的一部分&#xff0c;承载着无数重要的对话和回忆。然而&#xff0c;面对手机更换、系统升级或意外删除等情况&#xff0c;许多人不禁要问&#xff1a;两年前的微信聊天记录能恢复吗&#xff1f;这个问题的答案并不简单&#xff0c;因为能否…

基于Docker搭建属于你的CC++集成编译环境

常常&#xff0c;我会幻想着拥有一个随时可以携带、随时可以使用的开发环境&#xff0c;那该是多么美好的事情。 在工作中&#xff0c;编译环境的复杂性常常让我头疼不已。稍有不慎&#xff0c;删除了一些关键文件&#xff0c;整个编译链就会瞬间崩溃。更糟糕的是&#xff0c;…

【leetcode1944--队列中可以看到的人数】

有n人排成一个队列&#xff0c;从左到右编号为0到n-1&#xff0c;height数组记录每个人的身高&#xff0c;返回一个数组&#xff0c;记录每个人能看到几个人。 类比&#xff1a;山峰问题&#xff0c;高的后面的矮的看不见。 从后往前&#xff0c;最后一个元素入栈&#xff0c…

ClickHouse数据管理与同步的关键技术

2024年 5 月 18 日&#xff0c;ClickHouse官方首届杭州 Meetup 活动成功举行。本次活动由 ClickHouse 和阿里云主办&#xff0c;NineData 和云数据库技术社区协办。围绕ClickHouse的核心技术、应用案例、最佳实践、数据管理、以及迁移同步等方面&#xff0c;和行业专家展开交流…

wps能打开caj文件吗?CAJ应该如何打开?caj转pdf

问题1&#xff1a;wps能打开caj文件吗&#xff1f; WPS不能直接打开CAJ文件。 CAJ是中国知网开发的一种文件格式&#xff0c;主要用于存储学术文献&#xff0c;需要使用专门的阅读器才能打开。 问题2&#xff1a;CAJ应该如何打开&#xff1f; 要打开CAJ文件&#xff0c;你可…

QT 圆盘百分比

1. /* 设置抗锯齿 */painter.setRenderHints(QPainter::Antialiasing, true);/* 最外层的圆 */QRect drawRect event->rect();QRadialGradient gradient1(drawRect.center(), drawRect.width() / 2, drawRect.center()); gradient1.setColorAt(0, Qt::transparent); gradi…

LangChain 0.2 - 基于 SQL 数据构建问答系统

本文翻译整理自&#xff1a;Build a Question/Answering system over SQL data https://python.langchain.com/v0.2/docs/tutorials/sql_qa/ 文章目录 一、项目说明⚠️ 安全说明⚠️架构 二、设置三、Chains1、将问题转换为 SQL查询2、执行 SQL查询3、回答问题 四、Agents1、S…