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

效果图如下:

相关推荐
爱泡脚的鸡腿24 分钟前
uni-app D4 实战(小兔鲜)
前端·vue.js·架构
广白27 分钟前
钉钉小程序直传文件到 阿里云OSS
前端·vue.js·uni-app
摇滚侠1 小时前
Vue 项目实战《尚医通》,完成订单详情静态的搭建,笔记47
vue.js·笔记
特级业务专家2 小时前
续集:Vite 字体插件重构之路 —— 从“能用”到“生产级稳定”
javascript·vue.js·vite
Coder-coco3 小时前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·spring boot·微信小程序·论文·个人健康系统
一 乐4 小时前
英语学习激励|基于java+vue的英语学习交流平台系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·学习·小程序
老华带你飞4 小时前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·微信小程序·论文·毕设·个人健康系统
JIngJaneIL4 小时前
停车场管理|停车预约管理|基于Springboot+的停车场管理系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·notepad++·停车场管理|
零一科技4 小时前
Vue3学习第七课:(Vuex 替代方案)Pinia 状态管理 5 分钟上手
前端·vue.js
火星数据-Tina6 小时前
让电竞数据实时跳动:Spring Boot 后端 + Vue 前端的完美融合实践
前端·vue.js·spring boot