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

ElementPlus的日期选择器实现周选择,并且显示的是日期范围,其效果如下:

  1. 首先修改中文语言环境,否则日期选择器是从周日开始的。在main.js文件中加上以下代码:
javascript 复制代码
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. 周选择的代码片段如下
html 复制代码
          <el-date-picker
              v-model="date"
              type="week"
              :format="`${startTime} - ${endTime}`"
              placeholder="请选择周"
              @change="handleWeekChange"
          />

js部分的代码如下:

javascript 复制代码
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文件中引入

javascript 复制代码
import { createApp } from 'vue';
// dayjs
import dayjs from 'dayjs';

const app = createApp(App);
app.config.globalProperties.$dayjs = dayjs;
相关推荐
一个天蝎座 白勺 程序猿10 分钟前
Python(28)Python循环语句指南:从语法糖到CPython字节码的底层探秘
开发语言·python
持梦远方35 分钟前
C 语言基础入门:基本数据类型与运算符详解
c语言·开发语言·c++
abigale0340 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
zzywxc7871 小时前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
DES 仿真实践家2 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python