公司的兩個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框架同理，套用即可。
以上是我在實際開發中遇到的問題，希望看到這篇文章的小伙伴可以得到收獲，有興趣可以關注我，互相學習。
有問題也可留言，我會及時處理回答，謝謝。
原創不易，多謝支持！