elementUI日期选择器组件（DatePicker）的使用-带快捷选项和开始、结束值的获取

效果图

html部分

<el-date-picker
                  v-model="detailDate"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyyMMdd"
                  @change="dateChange"
                  :picker-options="pickerOptions2">
 </el-date-picker>

jq部分

<script>
export default {
	data() {
          return {
            detailDate:'',
            startTime: '',
            endTime: '',
            pickerOptions2: {
              shortcuts: [
                {
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 60 * 60 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end])
                  }
                },
                {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
                    picker.$emit('pick', [start, end])
                  }
                },
                {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3 * 30 * 24 * 60 * 60 * 1000);
                    picker.$emit('pick', [start, end])
                  }
                }
              ]
            }
          }
    },
    methods: {
	        dateChange(val) {
	            this.startTime = val.toString().split(",")[0]
	            this.endTime = val.toString().split(",")[1]
	          },
         }
}

</script>