iview 时间控件_iview和element中日期选择器快捷选项的定制控件

在 iView 和 element 中，日期选择器的快捷选项是可以自定义的。下面分别介绍一下 iView 和 element 中如何进行快捷选项的定制。

## iView 时间控件

iView 中的时间控件是基于 [vue-datepicker](https://www.npmjs.com/package/vue-datepicker) 进行封装的。在 iView 中，可以通过 `picker-options` 属性来进行快捷选项的定制。例如，下面的代码会在日期选择器中添加一个“上个月”选项：

<DatePicker type="daterange" :picker-options="pickerOptions"></DatePicker>

data() {
  return {
    pickerOptions: {
      shortcuts: [{
        text: '上个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setMonth(end.getMonth() - 1);
          picker.$emit('pick', [start, end]);
        }
      }]
    }
  }
}

其中，`shortcuts` 数组中可以定义多个快捷选项。

## element 中日期选择器

element 中的日期选择器是基于 [vue-datepicker](https://www.npmjs.com/package/vue-datepicker) 进行封装的。在 element 中，可以通过 `shortcuts` 属性来进行快捷选项的定制。例如，下面的代码会在日期选择器中添加一个“上个月”选项：

<el-date-picker
  v-model="date"
  type="daterange"
  :shortcuts="shortcuts">
</el-date-picker>

data() {
  return {
    date: '',
    shortcuts: [{
      text: '上个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setMonth(end.getMonth() - 1);
        picker.$emit('pick', [start, end]);
      }
    }]
  }
}

其中，`shortcuts` 数组中可以定义多个快捷选项。