【Javascript】elementUI日期选择组件封装

最新推荐文章于 2024-08-12 15:23:33 发布

置顶

Zingj

最新推荐文章于 2024-08-12 15:23:33 发布

阅读量908

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Zingj/article/details/108572680

版权

本文介绍如何在Vue.js项目中利用ElementUI的日期选择组件自定义一个周选择器。通过修改默认配置，解决周首日为周日的问题，并实现选择周后自动显示周起止日期。代码示例包括HTML部分、v-model绑定、picker-options设置以及change事件处理函数，确保用户只能选择过去的日期，并将选定周的日期存储在数组中。

摘要由CSDN通过智能技术生成

之前项目中有需求写一个周日期选择器，只能整周选择日期，并且需要在选择框中展示周起止日期。项目是使用vue.js+elementUI开发的，所以组件用了elementUI的日期选择器，官网给出的例子中已经有周选择器：

但不符合我们的实际业务需求，只能在选择框中展示出所选择的周在一年中的周数。所以我使用了最普通的日期选择框自己实现了一个还算比较完整的周选择器：

html部分代码如下：

        <span class="search-box-text">日期范围(*)：</span>
        <el-date-picker
          style="width:150px;font-size:15px"
          v-model="dateSelect"
          type="week"
          format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          placeholder="选择日期"
          @chang