vue+elementUI實現的日期選擇元件
阿新 • • 發佈：2019-07-13
專案需求，需要實現如下快速日期選擇的介面。
因為專案技術棧用到了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(){}
}
}