vue+elementUI實現的日期選擇組件

項目需求，須要實現以下快速日期選擇的界面。

由於項目技術棧用到了vue+elementUI，故封裝了組件進行復用。

組件代碼以下：

<template>
<el-popover v-model="showPopover"
                        style="padding:8px 30px;border:1px solid #f0f0f0;margin:0 20px">
                        <div style="padding:20px 5px">
                          <p>選擇日期</p>
                          <div style="margin:10px 20px 30px 20px">
                            <el-date-picker v-model="beginDate"  format="yyyy-MM-dd"  value-format="yyyy-MM-dd" 	 type="date" style="width:150px;font-size:12px;padding-left:3px;" placeholder="開始時間"></el-date-picker>
                            - <el-date-picker v-model="finalDate" format="yyyy-MM-dd"  value-format="yyyy-MM-dd" 	 type="date" style="width:150px;font-size:12px;padding-left:3px;" placeholder="結束時間"></el-date-picker>
                          </div>
                          <p>快捷日期</p>
                          <div style="margin-top:30px">
                            <el-row>
                              <el-col :span="12"><el-button type="text" @click="setDay(0)">今天</el-button></el-col>
                              <el-col :span="12"><el-button type="text" @click="setDay(-1, true)">昨天</el-button></el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="12"><el-button type="text" @click="setDay(-7)">過去7天</el-button></el-col>
                              <el-col :span="12"><el-button type="text" @click="setDay(-14)">過去14天</el-button></el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="12"><el-button type="text" @click="setDay(-30)">過去30天</el-button></el-col>
                            </el-row>
                          </div>
                          <hr style="border:1px solid #f0f0f0;margin:20px;" />
                          <el-button type="primary" @click="showPopover = false;handleConfirm()">肯定</el-button>
                          <el-button @click="showPopover = false">取消</el-button>
                        </div>
                        <span slot="reference">{{startDate}} 至 {{endDate}}</span>
                      </el-popover>
</template>
<script>
import dateUtil from "../utils/dateutil.js";

export default {
  props:{
         startDate: String,
         endDate: String
      },
  data() {
    return {
      beginDate: '',
      finalDate: '',
      showPopover: false
    };
  },
 
  created(){
   
  },
  computed: {

  },
  methods: {
    handleConfirm(){
      let value = {startDate: this.beginDate, endDate: this.finalDate};
      this.$emit('afterDateSelect', value)
    },
    // 過去幾天
    setDay(day, isSingleDay){
      this.beginDate = dateUtil.getDay(day);
      if(isSingleDay){
        this.finalDate = dateUtil.getDay(day);
      }else{
        this.finalDate = dateUtil.getDay(0);
      }
    },
  },
  mounted() {
    this.beginDate = this.startDate ? this.startDate : dateUtil.getDay(0);
    this.finalDate = this.endDate ? this.endDate : dateUtil.getDay(0);
  }
};
</script>

說明

一、在這個組件中，引入了一個日期工具類——dataUtil，利用它能夠快速獲取各個時期的時間。它的內部代碼以下

var now = new Date(); //當前日期 
var nowDayOfWeek = now.getDay(); //今天本週的第幾天 
var nowDay = now.getDate(); //當前日 
var nowMonth = now.getMonth(); //當前月 
var nowYear = now.getYear(); //當前年 
nowYear += (nowYear < 2000) ? 1900 : 0; //

var lastMonthDate = new Date(); //上月日期
lastMonthDate.setDate(1);
lastMonthDate.setMonth(lastMonthDate.getMonth()-1);
var lastYear = lastMonthDate.getYear();
var lastMonth = lastMonthDate.getMonth();

let dateUtil = {
  // 獲取幾天前/後的日期
  getDay: function(day){
    var today = new Date();
    var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
    today.setTime(targetday_milliseconds); //注意，這行是關鍵代碼
    var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    var tDate = today.getDate();
    tMonth = this.doHandleMonth(tMonth + 1);
    tDate = this.doHandleMonth(tDate);
    return tYear+"-"+tMonth+"-"+tDate;
  },
  doHandleMonth: function(month){
    var m = month;
    if(month.toString().length == 1){
      m = "0" + month;
    }
    return m;
  },

  //格式化日期：yyyy-MM-dd 
  formatDate: function(date) { 
    var myyear = date.getFullYear(); 
    var mymonth = date.getMonth()+1; 
    var myweekday = date.getDate(); 
    
    if(mymonth < 10){ 
    mymonth = "0" + mymonth; 
    } 
    if(myweekday < 10){ 
    myweekday = "0" + myweekday; 
    } 
    return (myyear+"-"+mymonth + "-" + myweekday); 
  },

  //得到某月的天數 
   getMonthDays: function(myMonth){ 
    var monthStartDate = new Date(nowYear, myMonth, 1); 
    var monthEndDate = new Date(nowYear, myMonth + 1, 1); 
    var days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24); 
    return days; 
  }, 

  //得到本週的開始日期 
  getWeekStartDate: function() { 
    var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek); 
    return this.formatDate(weekStartDate); 
  }, 
  
  //得到本週的結束日期 
  getWeekEndDate: function() { 
    var weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek)); 
    return this.formatDate(weekEndDate); 
  }, 
  
  //得到本月的開始日期 
  getMonthStartDate: function(){ 
    var monthStartDate = new Date(nowYear, nowMonth, 1); 
    return this.formatDate(monthStartDate); 
  }, 
  
  //得到本月的結束日期 
  getMonthEndDate: function(){ 
    var monthEndDate = new Date(nowYear, nowMonth, this.getMonthDays(nowMonth)); 
    return this.formatDate(monthEndDate); 
  },

  //得到上月開始時間
  getLastMonthStartDate: function(){
    var lastMonthStartDate = new Date(nowYear, lastMonth, 1);
    return this.formatDate(lastMonthStartDate); 
  },
  
  //得到上月結束時間
  getLastMonthEndDate: function(){
    var lastMonthEndDate = new Date(nowYear, lastMonth, this.getMonthDays(lastMonth));
    return this.formatDate(lastMonthEndDate); 
  }
}

export default dateUtil

二、接收參數

startDate ：初始化的開始日期

endDate ：初始化的結束日期

 

三、日期選擇完後的回調函數

afterDateSelect

 

四、頁面調用

<template>
  <DateSelect @afterDateSelect="afterDateSelect" :endDate="endDt" :startDate="startDt"></DateSelect>
</template>

import DateQuickSelect from '../common/DateQuickSelect';
    export default {
         data() {
            return {
                startDate: '2019-07-13',
                endDt: '2019-07-13'
            }
         },
         components: {
            DateSelect
         },     
         methods:{
           afterDateSelect(){}
         }   
    }