【element-ui】el-date-picker动态设置picker-options

复制代码
<el-date-picker
  v-model="formObj.startDate"
  type="date"
  placeholder="开始时间"
  :picker-options="startPickerOptions">
</el-date-picker>

<el-date-picker
  v-model="formObj.endDate"
  type="date"
  placeholder="结束时间"
  :picker-options="endPickerOptions">
  </el-date-picker>

computed:{
    startPickerOption(){
        let _this = this
        return {
            disabledDate(time){
                if(_this.formObj.endDate){
                    return time.getTime() > new Date(_this.formObj.endDate).getTime()
                }else{
                    return false
                }
            }
        }
    },
    endPickerOption(){
        let _this = this
        return {
            disabledDate(time){
                if(_this.formObj.startDate){
                    return time.getTime() > new Date(_this.formObj.startDate).getTime()
                }else{
                    return false
                }
            }
        }
    },
}

效果图如下:

相关推荐
蕉君桑15 分钟前
vue2使用vue-echarts
前端·vue.js·echarts
小王码农记2 小时前
vue中动态绑定ref后,获取某个具体组件实例
前端·javascript·vue.js
悲且狂3 小时前
vue辅助工具(vue系列二)
前端·javascript·vue.js
牧码岛3 小时前
Web前端之Vue+Element实现表格动态不同列合并多行、localeCompare、forEach、table、push、sort、Map
前端·javascript·elementui·vue·web·web前端
DCTANT3 小时前
【原创】vue-element-admin-plus完成确认密码功能,并实时获取Form中表单字段中的值
前端·javascript·vue.js·elementui·typescript
悲且狂5 小时前
Vue环境搭建:vue+idea
前端·vue.js·intellij-idea
LoveCan5 小时前
ant-design-vue自动计算a-table每一列的宽度的实现
前端·vue.js
hepherd5 小时前
Vue学习笔记 - 逻辑复用 - 组合式函数
前端·vue.js
喝西瓜汁的兔叽Yan5 小时前
探索 Vue 3 中 vue-router 的 router.resolve () API
前端·vue.js
Ankkaya5 小时前
基于 vue3,实现短信模板编辑
前端·vue.js