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>