使用elementui的el-date-picker周组件,并让其从周一到周日而非周日到周六,获取对应的周一数据。

之前做项目的时候,有用到elementui的el-date-picker周组件,本来以为是现成的,结果发现默认的日期是从周日到周六,如下图
在这里插入图片描述

我们日常项目所需的是从周一到周日,
在这里插入图片描述

解决方法已出,请参考。


 1. 在el-date-picker加入:picker-options="{ firstDayOfWeek: 1 }"
   <el-date-picker
      v-model="value1"
      type="week"
      format="yyyy 第 WW 周"
      placeholder="选择周"
      :picker-options="{ firstDayOfWeek: 1 }"
    >
    </el-date-picker>
 2. 这时候你会发现,value1绑定的数据是星期二的数据,我们想要获取的是周一的数据,需要对时间进行一个处理。
 3. 对时间进行处理,需要引入moment,使用npm install moment --save安装后,在需要的.vue文件里引入import moment from "moment";
 4. 添加一个函数,处理时间<el-date-picker
      v-model="value1"
      type="week"
      format="yyyy 第 WW 周"
      placeholder="选择周"
      :picker-options="{ firstDayOfWeek: 1 }"
      @input="cc"
    >
    </el-date-picker>
  cc为函数名
   methods: {
    cc() {
      console.log(this.value1);
       let weekOfday = moment(this.value1).format("E");
      let Monday = moment(this.value1)
        .subtract(weekOfday - 1, "days")
        .format("YYYY-MM-DD"); //周一日期
      let Sunday = moment(this.value1)
        .add(7 - weekOfday, "days")
        .format("YYYY-MM-DD"); //周日日期
      console.log(Monday, Sunday);
    },
  },
  这样就可以获得周一的日期啦!
  

记录一下,有问题,请批评指正,谢谢!

前端小白记录
关注 关注
  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue3 - Element Plus 日期选择器 el-date-picker,设置 type=week 变成选择器后,将选择时修改为 “周一周日“ 为一组范围(详细示例代码,新手小白秒会)
王佳斌
03-13 2922
vue3,element-plus,DatePicker日期选择器,el-date-picker,type=week,选择器,日期选择器week怎么拿到具体的时间范围,如何取week选择器的value值,format如何设置,时间选择器按选择时展示具体日期范围,vue3 elementPlus日期选择器 选择一7天的数据格式怎么拿到,el-date-picker设置type等于week后怎么设置format属性,format和value-format怎么设置,范围选择器,一,选择一7天时间
1.根据日期选择器el-date-picker计算出是
weixin_43204464的博客
10-25 473
1.getDay() 从 Date 对象返回一中的某一天 (0 ~ 6)。Date 对象会自动把当前日期和时间保存为其初始值。Date 对象用于处理日期和时间。
element日期选择器——周一开始,格式改成年月日
最新发布
m0_68275786的博客
05-28 306
【代码】element日期选择器——周一开始,格式改成年月日。
el-date-picker 结合dayjs 快速实现选择、月选择,并设置控件的显示格式
IT_dabai的博客
06-15 2777
el-date-picker 结合dayjs 快速实现选择、月选择,并设置控件的显示格式 提供选择器,可供选择为 按月选择 或 按选择 这里给el-date-picker选择,配置了起始日为星期一。
el-date-picker选择器获取选择的日期范围
博客简介
12-25 1688
【代码】el-date-picker选择器获取选择的日期范围。
Element el-date-picker 日期选择器详解
热门推荐
程序员大阳
10-15 6万+
本文目录
elementUI DatePicker 日期选择面板显示数的进一步说明
elewen110的专栏
03-30 4295
elementUI 没有提供选择器显示数的功能,但是我们的项目中又必不可少。经过一番对比发现,其他几个 UI 框架好像大多数都支持 选择器显示数, 也有人给 elementUI 提了 issue,但是人家扯了一大堆原因,反正就是这个功能有问题,不提供这个功能,你能怎么滴吧。我心想既然别的UI框架能提供,你为什么就不能提供呢?至于其他的问题,留给用户自己去选择不行吗?但是我们也不能在一棵树上吊死啊。 经过查询,根据该博主分项的文章:elementUI DatePicker 日期选择器 数显示.
elementui elementUI - date-picker.zip
03-02
ElementUI 中,`<el-date-picker>` 是这样一个组件,它支持多种格式的日期输入,包括年、月、日、小时和分钟等。默认情况下,时间选择器的时间间隔(步长)是半小时,即每点击一次上下箭头,时间会递增或递减30...
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图,方便没有vip的小伙伴下载
最全 element UI el-date-picker组件换色(less)
11-23
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
解决Element中el-date-picker组件不回填的情况
01-21
当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如: 新建一个活动,需要定义活动的时间范围; 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交,新建完成; 网页上...
vue element-ui el-date-picker限制选择时间为当天之前的代码
10-16
主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
elementui选择器获取当前选中,并显示当日期时间段
weixin_44217525的博客
05-29 1万+
element的这个选择器有点鸡肋啊,format支持WW,但是value-format不支持,就是可以给你看当前是第几,但是数据就是不给你,给你的是啥呢,是Mon May 04 2020 00:00:00 GMT+0800 (中国标准时间)。。。这样的,没办法,自己上呗 用了将近一天的时间,就是实现了这么个效果,下面介绍实现流程 这是html,用的是elementui选择器,下面的input是为了展示用的,下面详细说 <el-date-picker type="week" :editabl
element ui datepicker时间控件实现范围选择,季,年。
a2014528883的博客
11-03 1万+
官网elementui仅有日和月的范围选择控件。所以开发了季年。
vue周日组件
chu_haiquan的博客
04-25 4072
<template> <div class="date"> <!-- 年份 月份 --> <div class="month"> <Icon color="#ff9900" type="ios-arrow-back" size="30" @click="weekPre"/> <spa...
周日组件开发
weixin_63456913的博客
05-17 160
组件传参给父组件el-calendar没有封装好的方法,自定义一个。解决子组件修改父组件传的值得BUG。重点:自定义日历内容。
element 选择器el-date-picker_vue3 el-date-picker type=&quot;week
m0_61042126的博客
04-21 307
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;Tips:其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的。
elementui 时间选择控件 type=‘week‘ 时的参数配置以及传值问题
Humor_L的博客
06-30 1599
element ui 日期选择器 type='wee'
elementui el-date-picker
12-10
elementui el-date-picker是一个日期选择器组件,可以用于选择单个日期或日期范围。它支持多种日期格式和选项配置,可以根据需要进行自定义。以下是两个el-date-picker的例子: 1.单日期选择 ```html <el-date-picker clearable v-model="form.fillTime" type="date" style="width:100%;" value-format="yyyy-MM-dd" :picker-options="fillTimePickerOptions" placeholder="请选择业务日期"></el-date-picker> ``` 2.日期范围选择 ```html <el-date-picker type="daterange" v-model="value2" value-format="yyyy-MM-dd" :picker-options="exportPickerOptions" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> ```

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 使用elementui的el-date-picker周组件,并让其从周一到周日而非周日到周六,获取对应的周一数据。 7519
  • el-dialog怎么让其内容在其内部滚动,自己位置不随内容改变 4488
  • echarts中datazoom报错datazoom.slider is used but not imported. 4300
  • vue+moment+elementui实现周显示起始和终止日期(周一和周日) 4148
  • vue子元素点击阻止父元素事件 4043

最新评论

  • vue+element-ui实现横向长箭头,横向线上下可自定义文字(使用after伪元素实现箭头)

    普通网友: 文章结构严谨有条,层次分明,读起来一点也不费劲,让人受益匪浅。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • vue修改路由meta的标题

    普通网友: 文章内容通俗易懂,适合不同层次的读者。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • vue修改路由meta的标题

    普通网友: 感谢大佬分享好文,学到了不少新知识,支持大佬,期待大佬持续输出优质文章!【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • vue+element-ui实现横向长箭头,横向线上下可自定义文字(使用after伪元素实现箭头)

    普通网友: 这篇文章真是一篇佳作!作者运用了生动有趣的语言,将枯燥的理论知识娓娓道来,让人如沐春风。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • vue+element-ui实现横向长箭头,横向线上下可自定义文字(使用after伪元素实现箭头)

    普通网友: 大佬的文章写的太精辟了 让我深刻了解了这篇文章的精髓 谢谢大佬分享,希望继续创作优质博文。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

大家在看

  • 面试题:为什么说HashMap是线程不安全的?有什么解决方法? 312
  • Python网络数据可视化全攻略【方法与技巧详解】 894
  • SpringAOP 725
  • 昇思25天学习打卡营第10天|NLP-RNN实现情感分类 1187
  • STL—string类—模拟实现 1549

最新文章

  • vue路由传参使用query传递对象
  • 学艺不精产生大坑-----vue 的v-else 和v-if控制多个组件的显隐,但是同时显示了
  • Duplicate keys detected: ‘tab-角色‘. This may cause an update error
2024年14篇
2023年5篇
2022年27篇
2021年9篇

目录

目录

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值

PHP网站源码福永高端网站设计塘坑外贸网站建设南联阿里店铺运营坪地建设网站福永设计公司网站光明网站设计模板南澳SEO按天收费南山网络推广大运关键词按天计费大浪网站搭建福田外贸网站设计坪山至尊标王坂田建网站南山网站推广工具木棉湾网站搜索优化福永网站优化软件宝安网站推广盐田网站设计永湖网站制作龙岗优化惠州设计公司网站沙井关键词按天收费民治网站开发盐田设计网站吉祥网站推广工具丹竹头SEO按天收费横岗百度网站优化排名罗湖百度关键词包年推广南山关键词按天收费惠州seo网站优化歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

PHP网站源码 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化