饿了么DatePicker限制选择的日期范围 控制开始日期和结束时间 只能选未来30天 禁止选择某些日期 daterange element-ui

element-ui(vue) DatePicker限制选择的日期范围, 控制开始日期和结束时间, 只能选未来30天 禁止选择某些日期 daterange

Demo 示例 + 教程

只能选择未来30天的日期控件
<el-date-picker v-model="form.date" type="date" :picker-options="pickerOptions" placeholder="选择日期" ></el-date-picker>

通过 picker-options 配置 disabledDate(date) 函数来实现：对选择范围的控制，

// vue.js data:
pickerOptions: {
  disabledDate(date) {
    // date 入参是 Date()的实例

    let now = Date.now()
    let limitDays = 30 * 24 * 60 * 60 * 1000 // 30天的毫秒数
    let ts = date.getTime()
    // 只允许选择: 未来的30天
    if (ts >= now && ts <= now + limitDays) return false // 启用

    return true // 禁用
  }
}

// 注释: disabledDate(date)函数中，
  如果date在允许选择的范围内，
    就返回false (是不是违背直觉，哈哈)
  不允许选择的，就返回true

Demo: 只能选择未来30天的日期控件

试试这个demo，是不是只能选择未来30天啊

限制只能选择：未来7天、未来10天，也可以参考这些代码快速实现。

再对比一下普通的日期控件

普通的日期控件： type="date"

日期时间 type="datetime"

// demo 的全部代码