element-ui 日期选择范围

1,820 阅读1分钟

支持选择日期范围

  1. 前一个月
  2. 前后一个月
  3. 后一个月
    <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="parameter.expiredTime"
        format="yyyy 年 MM 月 dd 日"
        value-format="timestamp"
        style="width: 100%;"
        :picker-options="pickerOptions"
    >
    </el-date-picker>

如果需要访问全局的 this 必须写箭头函数

    export default {
        data () {
            return {
                pickerOptions: {
                    // 如果需要访问全局的 this 必须写箭头函数
                    disabledDate: (time) => {
                        const maxTime = this.expiredTime
                        if (maxTime === '0') {
                            //  设置选择今天之后的日期
                            return time.getTime() < Date.now();
                        } else {
                            // 选择 今天以后 到 指定日期结束时间
                            return time.getTime() < Date.now() || time.getTime() > maxTime
                        }
                    }
                }
            }
        }
    }