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

效果图如下:

相关推荐
猫猫不是喵喵.1 小时前
Vue3 Props 属性
前端·javascript·vue.js
测试开发技术8 小时前
AI 测试提效 | 告别手工写脚本,分享我的 Playwright + Skill 批量生成 UI 自动化脚本方案
自动化测试·人工智能·ui·自动化·agent·skill·ai测试
小罗水8 小时前
第17章 后台管理端与演示支持
javascript·vue.js·ecmascript
吾儿良辰10 小时前
Flutter 迎来重大变革:Material 设计系统拆分,迈向更开放的 UI 框架
javascript·flutter·ui
猫猫不是喵喵.11 小时前
Vue3 中 computed 计算属性与 watch、watchEffect 监听
前端·javascript·vue.js
En^_^Joy11 小时前
Vue项目创建与入口配置全攻略
前端·vue.js·arcgis
猫猫不是喵喵.12 小时前
Vue2 的 Vuex 状态管理与 Vue3 的 Pinia 状态管理
前端·javascript·vue.js
打妖妖灵滴哪吒14 小时前
IOS模态窗口的作用与设计原则
前端·ui
打妖妖灵滴哪吒15 小时前
前端开发/UI设计师-APP中如何进行可发现性设计
前端·ui
玛艾露贝1 天前
Browser-Use在UI自动化测试中的应用
ui