【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
                }
            }
        }
    },
}

效果图如下:

相关推荐
smileNicky1 小时前
在 VSCode 中运行 Vue.js 项目
ide·vue.js·vscode
程序员小远2 小时前
UI自动化测试方案详解
自动化测试·软件测试·selenium·测试工具·ui·职场和发展·测试用例
小马哥编程2 小时前
React和Vue在前端开发中, 通常选择哪一个
前端·vue.js·react.js
HCl+NaOH=NaCl+H_2O3 小时前
Quasar组件 Carousel走马灯
javascript·vue.js·ecmascript
CoderIsArt4 小时前
WPF的UI元素类型详解
ui·wpf
Varpb6 小时前
【vue】【环境配置】项目无法npm run serve,显示node版本过低
前端·vue.js·npm
Minyy116 小时前
Vue3指令(二)--v-text、v-html数据渲染,计算属性
前端·javascript·vue.js·前端框架·vue·html
工业互联网专业8 小时前
基于springboot+vue的机场乘客服务系统
java·vue.js·spring boot·毕业设计·源码·课程设计·机场乘客服务系统
inksci8 小时前
Vue 3 打开 el-dialog 时使 el-input 获取焦点
前端·javascript·vue.js
若愚67928 小时前
前端取经路——量子UI:响应式交互新范式
前端·ui·交互