项目需求，需要实现如下快速日期选择的界面。
因为项目技术栈用到了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: '-07-13',endDt: '-07-13'}},components: {DateSelect},methods:{afterDateSelect(){}} }
