• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
前端小白记录
帮助1

之前做项目的时候,有用到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);
    },
  },
  这样就可以获得周一的日期啦!
  

学新通

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

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhggkhka
系列文章
更多 icon
同类精品
更多 icon
继续加载