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>

说明

1、在这个组件中，引入了一个日期工具类——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

2、接收参数

startDate ：初始化的开始日期

endDate ：初始化的结束日期

 

3、日期选择完后的回调函数

afterDateSelect

 

4、页面调用

<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(){}
         }   
    }

 

转载于:https://my.oschina.net/u/3460260/blog/3073787