element-plus的日期选择器快捷选项和禁用时间范围

element-plus的日期选择器快捷选项和禁用时间范围

官方文档有误且只有ts写法

1. 快捷选择

页面

<el-date-picker
      v-model="value2"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>

data

shortcuts: [
    {
        text: '最近7天',
        value: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date()]
    },{
        text: '最近15天',
        value: [new Date().getTime() - 3600 * 1000 * 24 * 15, new Date()]
    },{
        text: '最近30天',
        value: [new Date().getTime() - 3600 * 1000 * 24 * 30, new Date()]
    }
]

2. 禁用时间范围

禁用未经历的年份，月份和日直接更改getFullyear为getMonth或者getDate
页面

   <el-date-picker
        v-model=".year"
        type="year"
        placeholder="选择年"
        format="YYYY 年"
        value-format="YYYY"
        :disabled-date="disabledYear">
    </el-date-picker>

data

  disabledYear(date) {
	   return new Date(date).getFullYear() > (new Date().getFullYear()) - 1
	},