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;
相关推荐
心情好的小球藻4 分钟前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜13 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己16 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y40900123 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB2426 分钟前
html复习
javascript·microsoft·html
汉得数字平台31 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹37 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
古月-一个C++方向的小白6 小时前
C++11之lambda表达式与包装器
开发语言·c++
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss