vue+element?DatePicker實現(xiàn)日期選擇器封裝

更新時間：2023年02月09日 08:18:02 作者：Wh1T3Zz

Vue?Element?DatePicker是一款基于Vue.js的日期選擇控件，它提供了豐富的日期選擇功能，支持日期范圍選擇、日期格式化、自定義日期格式、快捷選擇等功能，極大地提高了用戶的體驗，是開發(fā)者必備的日期選擇控件。

前言

今天封裝了一個DatePicker日期選擇器，發(fā)現(xiàn)帶快捷選擇的不太好封裝，我需要在不同的地方快捷選擇不同的時間，并且快捷顯示的時間是從昨天開始，在網(wǎng)上找了一圈都沒找到便自己寫了一個記錄一下。

效果

在這里插入圖片描述

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

在這里插入圖片描述

我這里只有兩種顯示快捷選擇時間的樣式，可以根據(jù)具體需求無限加，達到我想要在不同的選擇器中顯示不同的快捷時間選擇的需求。

一、封裝組件

創(chuàng)建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:'',  //選擇時間數(shù)據(jù)
      pickerOptions:{ //快捷選擇時間數(shù)據(jù)
        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>

總結(jié)

我這里是通過父組件傳入的time去區(qū)分我想要哪種快捷選擇的時間

:time=1

子組件也就是封裝的組件(linechart)，進行接收父組件傳入的time并進行渲染主要邏輯是：

接收time，
通過mounted周期函數(shù)去執(zhí)行g(shù)etshortcuts()函數(shù)
判斷需要哪種類型的快捷選擇時間進行對應(yīng)渲染

我這里的話起止時間都是減了一天的（因為我是需要從昨天開始計算）

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的官方文檔上都有介紹就不過多說明了。

到此這篇關(guān)于vue+element DatePicker實現(xiàn)日期選擇器封裝的文章就介紹到這了,更多相關(guān)vue+element DatePicker日期選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: