• elementui限制开始日期和结束日期


    项目需求:开始日期和结束日期 禁用当前日期之前的日期。同时结束日期 禁用开始日期之前的日期

        <div class='startTime'>
            开始时间:<el-date-picker v-model="value1" type="date" @change="changeStartTime" :clearable="false"
              placeholder="选择日期" :picker-options="startDateLimit">
            </el-date-picker>
            <span class="important">*</span>
          </div>
          <!-- 结束时间 -->
          <div class="endTime">
            结束时间:<el-date-picker v-model="value2" :picker-options="endDateLimit" type="date" :clearable="false" @change="changeEndTime" placeholder="选择日期">
            </el-date-picker>
            <span class="important">*</span>
          </div>
    
    vm = new Vue({
      el: "#app",
      data: function () {
        return {
          value1: "", //开始时间
          value2: "", //结束时间
          startDateLimit: {
            disabledDate: (time) => {
              // if (this.value2 != "") {
              //   return time.getTime() > new Date(this.value2).getTime();
              // }else{
                return time.getTime() < Date.now() - 8.64e7;//禁用当前日期之前的时间;如果没有后面的-8.64e6就是不可以选择今天的
              // }
            }
          },
          endDateLimit: {
            disabledDate: (time) => {
              if(this.value1!= ""){
                return time.getTime() < new Date(this.value1).getTime()//禁用开始日期之前的日期
              }
              return time.getTime() < Date.now() - 8.64e7;; //减去一天的时间代表可以选择同一天;
            }
          },
        }
      },
    
    
    更多使用方法链接如下:
    https://blog.csdn.net/qq_33769914/article/details/83856268
    https://www.cnblogs.com/YuKiee/p/9651240.html
    
  • 相关阅读:
    anaconda安装
    MySQL数据库安装(windows 10 64bit)
    Redis数据库安装(windows 10 64bit)
    MongoDB可视化界面配置
    MongoDB安装(windows 10环境)
    四,程序流程控制之函数
    三,程序流程控制之顺序结构、分支结构与循环结构
    一,Python入门
    关于如何使用Python绘制基本数据图形模型
    关联分析
  • 原文地址:https://www.cnblogs.com/FormerWhite/p/11772647.html
Copyright © 2020-2023  润新知