iview和element中日期選擇器快捷選項的定製控件

 

 

 

 公司的兩個vue項目中都用到了iview和element這個框架，最近的兩個需求都有關於日期選擇的定製控件，就是要求日期選擇的快捷選項左邊欄有包含今日、昨日、本週、上週、最近一週、本月、上月、上季度、本季度、去年、今年，因爲element官網中對於這樣的快捷選項並非很好，知足不了實際的場景須要，因此就要本身定製開發。上網查了一些文檔，根據實際需求定製了以下的控件，因爲iview和element相似，下面只介紹element框架，iview也能夠直接套用。若是你的需求和個人相似，直接就能夠拷貝，按照步驟操做便可實現。

• 第一步：安裝moment

moment.js是一個很是實用的JS日期工具類，例如對日期獲取，格式化等操做都很方便，若是想進一步瞭解，可參考官網，地址以下：

官網地址：Moment.js 中文網

 

• 第二步：在須要的日期頁面中引入　　

import moment from "moment";

 

• 第三步：在屬性 options 對象中的 shortcuts 能夠設置快捷選項。　　

注意：若是你的需求要求傳遞時分秒的話就把 HH:mm:ss 加上，若是僅僅是須要傳遞年月日，就直接刪除  HH:mm:ss 便可。

 pickerOptions: { shortcuts: [{ text: '今日', onClick(picker) { const end = new Date(); const start = new Date(); picker.$emit('pick', [start, end]) } }, { text: '昨日', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24) end.setTime(end.getTime() - 3600 * 1000 * 24) picker.$emit('pick', [start, end]) } }, { text: '上週', onClick(picker) { const start = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss") const end = moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss"); picker.$emit('pick', [start, end]) } }, { text: '本週', onClick(picker) { const start = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss") const end = moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss"); picker.$emit('pick', [start, end]) } }, { text: '上月', onClick(picker) { const start = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD'); const end = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD'); picker.$emit('pick', [start, end]) } }, { text: '本月', onClick(picker) { const start = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD'); const end = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD'); picker.$emit('pick', [start, end]) } }, { text: '最近一週', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) picker.$emit('pick', [start, end]) } }, { text: '最近一月', onClick(picker) { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) picker.$emit('pick', [start, end]) } }, { text: '上季度', onClick(picker) { const start = moment(moment().quarter(moment().quarter() - 1).startOf('quarter').valueOf()).format('YYYY-MM-DD'); const end = moment(moment().quarter(moment().quarter() - 1).endOf('quarter').valueOf()).format('YYYY-MM-DD'); picker.$emit('pick', [start, end]) } }, { text: '本季度', onClick(picker) { const start = moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD'); const end = moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD'); picker.$emit('pick', [start, end]) } }, { text: '去年', onClick(picker) { const start = moment(moment().year(moment().year() - 1).startOf('year').valueOf()).format('YYYY-MM-DD'); const end = moment(moment().year(moment().year() - 1).endOf('year').valueOf()).format('YYYY-MM-DD'); picker.$emit('pick', [start, end]) } }, { text: '今年', onClick(picker) { const start = moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY-MM-DD'); const end = moment(moment().year(moment().year()).endOf('year').valueOf()).format('YYYY-MM-DD'); picker.$emit('pick', [start, end]) } }] }

 

• 第四步：HTML中的代碼寫日期組件，下面能夠直接拿來使用，以下：

 <el-col :span="16"> <el-date-picker v-model="timeValue" type="daterange" align="right" unlink-panels size="small" range-separator="-" start-placeholder="開始日期" end-placeholder="結束日期" @change="selectDate" :picker-options="pickerOptions"> </el-date-picker> </el-col>

 

第五步：在使用以前能夠先在控制檯打印出來，看是否符合本身的實際需求，以下：

 selectDate(date) {
　　　　console.log(date[0]) // 開始時間
　　　　console.log(data[1]) // 結束時間
　　}

 

這些是element框架中使用的，iview框架同理，套用便可。

以上是我在實際開發中遇到的問題，但願看到這篇文章的小夥伴能夠獲得收穫，有興趣能夠關注我，互相學習。

有問題也可留言，我會及時處理回答，謝謝。

 

原創不易，多謝支持！

 

原文出處：https://www.cnblogs.com/wangzhenhai/p/11714130.html