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

效果图如下:

相关推荐
假如让我当三天老蒯12 小时前
Options API(选项式 API) 和 Composition API(组合式 API)
前端·vue.js·面试
秃头网友小李3 天前
前端难点:keep-alive 缓存什么?RouterView 的 key 为什么要带 scopeId?
前端·vue.js
徐小夕4 天前
JitWord 3.0 正式发布,高精度Word异构解析+复杂组件兼容,打造web端协同Word编辑器
前端·vue.js·算法
奋斗吧程序媛4 天前
补充一个小知识点:有关@click.native
前端·vue.js
laowangpython4 天前
Photoshop 2025 下载安装全攻略
其他·ui·photoshop
英勇无比的消炎药4 天前
一行命令背后:TinyRobot CLI 如何重构 AI 对话接入的效率范式
vue.js·aigc
jay神4 天前
基于 FastAPI + Vue 的宠物领养管理系统
前端·vue.js·python·毕业设计·fastapi·宠物
一杯奶茶¥4 天前
水果销售网站 CRM客户信息管理系统 超市管理系 酒店管理系统 健身房管理系统 在线音乐网站 校园招聘系统
java·vue.js·spring boot·mysql·spring·java项目
风华圆舞4 天前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
英勇无比的消炎药4 天前
一站式搞定品牌风格:TinyRobot 主题定制从入门到精通
vue.js