這篇文章要寫的是element ui 日期選擇器范圍選擇的各種快捷選項的實現
效果是這樣：
記得當時面對這個需求的時候有些懵，所以寫出實現的過程。
進入正文：
創建項目
1.新建文件夾element-ui-date
2.element-ui-date里面新建文件demo.html
3.引入vue.js,element-ui.js,element-ui.css CDN標簽
本案例只有demo.html一個文件，所有代碼都在demo.html里面。
element-ui-date/demo.html代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script> </head> <body> </body> </html>
4.創建vue實例
在body標簽里面創建vue實例
<body> <div id="app"></div> <script> new Vue({ el: '#app', data () { return {} } }) </script> </body>
添加日期范圍選擇器組件
1.添加日期選擇器標簽
<div id="app"> <el-date-picker v-model="dateValue" size="small" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期"> </el-date-picker> </div>
2.日期選擇器綁定變量dateValue
<script> new Vue({ el: '#app', data () { return { dateValue: [], } } }) </script>
至此，一個基本的日期范圍選擇器就出來了
使用pickerOptions shortcuts編寫快捷選項
1.給el-date-picker標簽添加picker-options屬性，傳入變量pickerOptions
<div id="app"> <el-date-picker v-model="dateValue" size="small" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期" v-bind:picker-options="pickerOptions" > </el-date-picker> </div>
new Vue({ el: '#app', data () { return { dateValue: [], pickerOptions: {} } } })
2.昨天
給pickerOptions變量設置shortcuts屬性
new Vue({ el: '#app', data () { return { dateValue: [], pickerOptions: { shortcuts: [{ 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]); } }] } } } })
效果如下：
3.今天
添加shortcuts的成員
new Vue({ el: '#app', data () { return { dateValue: [], pickerOptions: { shortcuts: [{ 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 end = new Date(); const start = new Date(); picker.$emit('pick', [start, end]); } }] } } } })
4.上周
pickerOptions: { shortcuts: [{ 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 end = new Date(); const start = new Date(); picker.$emit('pick', [start, end]); } }, { text: '上周', onClick(picker) { const oDate = new Date(); oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 7); var day = oDate.getDay() var start = new Date(), end = new Date(); if (day == 0) { start.setDate(oDate.getDate()); end.setDate(oDate.getDate() + 6); } else { start.setTime(oDate.getTime() - 3600 * 1000 * 24 * day); end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (6 - day)); } picker.$emit('pick', [start, end]); } }] }
5.本周
shortcuts: [ // ... {text: '本周', onClick(picker) { const end = new Date(); const start = new Date(); var thisDay = start.getDay(); var thisDate = start.getDate(); if (thisDay != 0) { start.setDate(thisDate - thisDay); } picker.$emit('pick', [start, end]); } }]
6.上月
{ text: '上月', onClick(picker) { const oDate = new Date(); var year = oDate.getFullYear(); var month = oDate.getMonth(); var start, end; if (month == 0) { year-- start = new Date(year, 11, 1) end = new Date(year, 11, 31) } else { start = new Date(year, month - 1, 1) end = new Date(year, month, 0); } picker.$emit('pick', [start, end]); } }
7.本月
{ text: '本月', onClick(picker) { const end = new Date(); const start = new Date(); start.setDate(1); picker.$emit('pick', [start, end]); } }
8.上季度
{ text: '上季度', onClick(picker) { var oDate = new Date(); var thisYear = oDate.getFullYear(); var thisMonth = oDate.getMonth() + 1; var n = Math.ceil(thisMonth / 3); // 季度，上一個季度則-1 var prevN = n - 1; if (n == 1) { thisYear-- prevN = 4; } var Month = prevN * 3; // 月份 var start = new Date(thisYear, Month - 3, 1); var end = new Date(thisYear, Month, 0); picker.$emit('pick', [start, end]); } }
9.本季度
{ text: '本季度', onClick(picker) { var oDate = new Date(); var thisYear = oDate.getFullYear(); var thisMonth = oDate.getMonth() + 1; var n = Math.ceil(thisMonth / 3); // 季度 var Month = n * 3 - 1; var start = new Date(thisYear, Month - 2, 1); var end = new Date(); picker.$emit('pick', [start, end]); } }
10.去年
{ text: '去年', onClick(picker) { var oDate = new Date(); var prevYear = oDate.getFullYear() - 1; const end = new Date(); const start = new Date(); start.setFullYear(prevYear); start.setMonth(0); start.setDate(1); end.setFullYear(prevYear); end.setMonth(11); end.setDate(31); picker.$emit('pick', [start, end]); } }
11.今年
{ text: '今年', onClick(picker) { const end = new Date(); const start = new Date(); start.setMonth(0); start.setDate(1); picker.$emit('pick', [start, end]); } },
12.過往7天
{ text: '過往7天', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }
完成，效果：
完整代碼，github地址：https://github.com/cathy1024/cw-ui/tree/master/element-ui-date