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

效果图如下:

相关推荐
李二。14 小时前
AI翻译通(鸿蒙原生)—— 鸿蒙Next声明式UI翻译工具实战
人工智能·ui·harmonyos
xkxnq14 小时前
第八阶段:工程化、质量管控与高级拓展(130天),Vue端到端测试:Cypress自动化测试(登录流程+表单提交+页面跳转)
前端·vue.js·flutter
老毛肚14 小时前
jeecgboot vue API 拆分02
前端·javascript·vue.js
ZC跨境爬虫14 小时前
跟着 MDN 学JavaScript day_4:如何存储你需要的信息——变量
开发语言·前端·javascript·ui·ecmascript
星栈独行15 小时前
10 分钟跑起第一个 Makepad 应用:先把窗口开起来
前端·程序人生·ui·rust·开源·github
爱因斯坦乐1 天前
Vue项目整合
前端·javascript·vue.js
ct9781 天前
组件间的通信
前端·javascript·vue.js
左手吻左脸。1 天前
Vue 全栈面试题大全(2026 最新版最详细)
前端·javascript·vue.js
小新1101 天前
最简单但完整的 Vue 响应式示例(一个简单的计数器按钮)
前端·javascript·vue.js
刘海不能乱161 天前
Java JUC源码分析系列笔记-Synchronized
vue.js