element-ui DatePicker 日期选择器-让结束日期大于开始日期

复制代码
        <el-form-item label="起始日期" label-width="110px" prop="startDate">
          <el-date-picker
            v-model="ruleForm.startDate"
            type="date"
            placeholder="yyyy-mm-dd"
            class="limitWidth"
       :picker-options="pickerOptionsStart" ></el-date-picker> </el-form-item> <el-form-item label="结束日期" label-width="110px"> <el-date-picker v-model="ruleForm.endDate" type="date" placeholder="yyyy-mm-dd" class="limitWidth"
:picker-options="pickerOptionsEnd" ></el-date-picker> </el-form-item>
复制代码
复制代码
  data() {
    return {
      // 限制结束日期大于开始日期
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.ruleForm.endDate
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.ruleForm.startDate
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime()
          }
        }
      },
      ruleForm: {
        startDate: '', // 开始日期
        endDate: '', // 结束日期
      }
    }
  }
复制代码

 

posted @   吴小明-  阅读(1190)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
点击右上角即可分享
微信分享提示