vue+element DatePicker实现日期选择器封装

更新时间：2023年02月09日 08:18:02 作者：Wh1T3Zz

Vue Element DatePicker是一款基于Vue.js的日期选择控件，它提供了丰富的日期选择功能，支持日期范围选择、日期格式化、自定义日期格式、快捷选择等功能，极大地提高了用户的体验，是开发者必备的日期选择控件。

前言

今天封装了一个DatePicker日期选择器，发现带快捷选择的不太好封装，我需要在不同的地方快捷选择不同的时间，并且快捷显示的时间是从昨天开始，在网上找了一圈都没找到便自己写了一个记录一下。

效果

在这里插入图片描述

今天是2022年1月3日，最近一周便是从昨天开始往前推一周

在这里插入图片描述

我这里只有两种显示快捷选择时间的样式，可以根据具体需求无限加，达到我想要在不同的选择器中显示不同的快捷时间选择的需求。

一、封装组件

创建linechart

在这里插入图片描述

linechart：

直接上代码：

<!-- 
时间选择器（带快捷选择）
time:时间(必传)

time:{
  1:近七天,近三十天,近九十天
  2:近一天,近三天,近五天,近三十天
}
<template>
  <div class="line_charts">
        <el-date-picker
          v-model="timedata"
          type="daterange"
          unlink-panels
          :range-separator="$t('to')"
          :start-placeholder="$t('start_date')"
          :end-placeholder="$t('end_date')"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
  </div>
</template>
<script>
export default {
  props:{
    time:{
      default(){
        return [];
      }
    }
  },
  data(){
    return{
      timedata:'',  //选择时间数据
      pickerOptions:{ //快捷选择时间数据
        shortcuts: []
      }, 
      shortcuts:'',
    }
  },
  methods:{
    getshortcuts(){ //快捷选择时间事件
      if (this.time == 1) {
        this.pickerOptions.shortcuts = [
          {
            text: '最近七天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7 - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              console.log(picker);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90 - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }else{
        this.pickerOptions.shortcuts = [
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1 - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              console.log(picker);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3 - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近五天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 5 - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }
      
    }
  },
  mounted(){
    this.getshortcuts()
  }
}
</script>

二、页面中使用

workBench：

<template>
  <div class="workbench">
	  <linechart 
	   :time=1
	   ></linechart>
  </div>
</template>

<script>
	import linechart from './visualization/linechart.vue'
	export default {
	  components:{
	    linechart
	  },
	}
</script>

总结

我这里是通过父组件传入的time去区分我想要哪种快捷选择的时间

:time=1

子组件也就是封装的组件(linechart)，进行接收父组件传入的time并进行渲染主要逻辑是：

接收time，
通过mounted周期函数去执行getshortcuts()函数
判断需要哪种类型的快捷选择时间进行对应渲染

我这里的话起止时间都是减了一天的（因为我是需要从昨天开始计算）

start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1);
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);

需要从今天开始计算的话直接（三十天为例）

start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);

其他的话在Element的官方文档上都有介绍就不过多说明了。

到此这篇关于vue+element DatePicker实现日期选择器封装的文章就介绍到这了,更多相关vue+element DatePicker日期选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue数据回显表单无法编辑的解决方案
这篇文章主要介绍了Vue数据回显表单无法编辑的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-11-11
Vue中this.$emit和this.$on的使用
这篇文章主要介绍了Vue中this.$emit和this.$on的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue3获取元素并且修改元素样式的实战操作
ref作为在vue里面我们获取元素最常用的一个api,在vue3迎来改造,下面这篇文章主要给大家介绍了关于vue3获取元素并且修改元素样式的相关资料,需要的朋友可以参考下
2023-04-04
Vue input输入框回车以后自动刷新页面(直播程序)
这篇文章主要介绍了直播程序，Vue input输入框回车以后自动刷新页面,适用场景是在输入框输入字符并按下回车键搜索时，刷新页面，需要的朋友参考下实现代码
2023-01-01
Avue和Element-UI动态三级表头的实现
本文主要介绍了Avue和Element-UI动态三级表头的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
解决安装arco-design-pro-vue失败问题
这篇文章主要为大家介绍了解决安装arco-design-pro-vue失败的问题方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
Vue3中ref和reactive的基本使用及区别详析
这篇文章主要给大家介绍了关于Vue3中ref和reactive的基本使用及区别的相关资料,需要的朋友可以参考下
2022-07-07
Vue混入使用和选项合并详解
这篇文章主要介绍了Vue混入使用和选项合并，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-10-10
浅谈webpack编译vue项目生成的代码探索
本篇文章主要介绍了浅谈webpack编译vue项目生成的代码探索，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
详解Nuxt内导航栏的两种实现方式
这篇文章主要介绍了详解Nuxt内导航栏的两种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04