elementui中日期/时间的禁用处理,使用传值的方式

项目中,经常会用到 在一个学年或者一个学期或者某一个时间段需要做的某件事情,则我们需要在创建这个事件的时候,需要设置一定的时间周期,那这个时间周期就需要给一定的限制处理,避免用户的误操作,优化用户体验

如下:需求为,在选择学年后,学期的设置需要在学年中,且结束时间大于开始时间

javascript 复制代码
data() {
    return {
      pickerOptionsStartTimes: function (entDate) {//学期开始日期 禁用处理
        let entTimes = entDate
        return {
          disabledDate: time => {
            //开始年1月1日 之后的时间time.getTime() < new Date(this.ruleForm.beginYear, 0, 1).getTime()
            //结束年12月31日之前的时间 time.getTime() > new Date(this.ruleForm.endYear, 11, 31).getTime()
            if (entTimes) {
              //选择 开始年1月1日-结束时间  期间的时间
              return time.getTime() < new Date(this.ruleForm.beginYear, 0, 1).getTime() || time.getTime() > new Date(entTimes).getTime()
            } else {
              //选择 开始年1月1日-结束年12月31日
              return time.getTime() < new Date(this.ruleForm.beginYear, 0, 1).getTime() || time.getTime() > new Date(this.ruleForm.endYear, 11, 31).getTime()
            }
          },
        }
      },
      pickerOptionsEndTimes: function (startDate) {//学期结束日期 禁用处理
        let beginDate = startDate
        return {
          disabledDate: time => {
            if (beginDate) {
              //选择 开始时间-结束年12月31日前 的时间
              return time.getTime() < new Date(beginDate).getTime() || time.getTime() > new Date(this.ruleForm.endYear, 11, 31).getTime()
            } else {
              //选择 开始年1月1日-结束年12月31日
              return time.getTime() < new Date(this.ruleForm.beginYear, 0, 1).getTime() || time.getTime() > new Date(this.ruleForm.endYear, 11, 31).getTime();
            }
          },
        }
      },
}
}

因为我这个页面的需求是,学期管理是可以动态添加/删除的 所以需要用传值的方式 实现当前学期的起始时间设置

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css