这篇文章要写的是element ui 日期选择器范围选择的各种快捷选项的实现
效果是这样：
记得当时面对这个需求的时候有些懵，所以写出实现的过程。
进入正文：
创建项目
（1）新建文件夹element-ui-date
（2）element-ui-date里面新建文件demo.html
（3）引入vue.js,element-ui.js,element-ui.css CDN标签
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）昨天
（2）今天
（3）上周
（4）本周
（5）上月
（6）本月
（7）上季度
（8）本季度
（9）去年
（10）今年
（11）过往7天