element-ui日期组件(el-date-picker)

• 日期快捷键，如何用在非范围的组件的中；picker-options属性的shortcuts

//通过options属性的shortcuts的onClick来触发组件值的改变
//然后使用change事件和format属性，来控制组件的显示
//dayjs用来计算日期的
<el-date-picker
  :picker-options="pickerOptions"
  v-model="form.singWeek"
  type="week"
  :format="`${weekstartDate} 至 ${weekendDate}`"
  @change="weekChange"
  style="width: calc(100%)"
>
data(){
  this = that
  return {
    pickerOptions: {
    shortcuts: [
      {
        text: '上周',
        onClick(picker) {
              picker.$emit(
                'pick',
                dayjs()
                  .add(-1, 'week')
                  .startOf('week')
                  .add(1, 'day')
                  .format('YYYY-MM-DD')
              )
              that.weekstartDate = dayjs()
                .add(-1, 'week')
                .startOf('week')
                .add(1, 'day')
                .format('YYYY-MM-DD')
              that.weekendDate = dayjs()
                .add(-1, 'week')
                .endOf('week')
                .add(1, 'day')
                .format('YYYY-MM-DD')
            }
          }
       ]
    }
  }
}

weekChange(val) {
  this.weekstartDate = dayjs(val)
    .startOf('week')
    .add(0, 'day')
    .format('YYYY-MM-DD')
  this.weekendDate = dayjs(val)
    .endOf('week')
    .add(0, 'day')
    .format('YYYY-MM-DD')
}

• 日期范围自动选中第二个，无需点击两次

// 使用picker-options属性的onPick
// 其中onPick中能获取点击的时候的最大值和最小值
// 通过获取的最大值或最小值就能够给日期赋值;从而实现自动选择下一个值
// 给组件复制会出现拿不到this问题，以及需要调用响应式的api。这里借助了dayjs来计算日期。例子如下
    onPick({ maxDate, minDate }) {
      if (minDate) {
        that.$set(that.form, 'doubleWeek', [
          dayjs(minDate).startOf('week').format('YYYY-MM-DD'),
          dayjs(minDate).add(1, 'week').endOf('week').format('YYYY-MM-DD'),
        ])
        that.$refs.doubleWeek.hidePicker()
      }
      if (maxDate) {
        that.$set(that.form, 'doubleWeek', [
          dayjs(maxDate).endOf('week').format('YYYY-MM-DD'),
          dayjs(maxDate)
            .subtract(1, 'week')
            .startOf('week')
            .format('YYYY-MM-DD'),
        ])
        that.$refs.doubleWeek.hidePicker()
      }
    },