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

效果图如下:

相关推荐
刘科领3 小时前
使用ollama & openweb-ui 本地搭建自己的AI
人工智能·python·ui·ai
计算机毕设定制辅导-无忧学长5 小时前
《校园食堂在线订餐小程序的设计与实现》
java·vue.js·spring boot·微信小程序·uniapp·校园食堂在线订餐小程序
咖啡无伴侣7 小时前
1. 别再手动改代码格式了!Vue3 项目工程化规范搭建实战
vue.js·架构
知野小兔9 小时前
Vuex和Pinia状态管理
vue.js
VX_bysjlw98510 小时前
数码设备销售网站设计与实现39138-计算机毕设原创(免费领源码+带部署教程)
java·vue.js·spring boot·mysql·tomcat·mybatis·idea
xy345312 小时前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
whi15 小时前
一个小工具,解决了一个困扰 Vue 开发者多年的类型检查难题
vue.js·typescript
霍格沃兹测试学院-小舟畅学15 小时前
UI 智能遍历测试:状态识别、路径规划与覆盖率评估
microsoft·ui
Pocker_Spades_A16 小时前
Penpot自托管设计协作:Docker部署、MCP接入与Codex生成UI实操记录
ui·docker·容器
xcs194051 天前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js