• DatePicker日期选择器 ——日期选择范围控制


          <el-date-picker v-model="inItem.dateRange" type="daterange" range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                          :picker-options="pickerOptionsMinMax" @focus="checkDateRange" @change="checkDateRange">
                        </el-date-picker>

    限制日期选择方法

      return { pickerOptionsMinMax: {
            onPick: (obj) => {
              // obj.minDate = new Date(
              //   this.goalForm.dateRange[0] &&
              //     this.goalForm.dateRange[0].replace(/-/g, "/")
              // );
            },
            disabledDate: (time) => {
    
              // console.log(this.goalForm,"time")
              //this.formAttribute.red
              if (this.goalForm.dateRange && this.goalForm.dateRange.length > 0) {
                let maxTime = new Date(this.goalForm.dateRange[1]).getTime();
                let startDate = this.goalForm.dateRange[0];
                let minTime = new Date(
                  this.goalForm.dateRange[0] && startDate
                ).getTime(); //必须这样处理,否则 有八个小时差别
                // console.log(new Date(this.tempData.dateRange[0].replace(/-/g, '/')),"minTime")
                return time.getTime() > maxTime || time.getTime() < (minTime -24*60*60*1000);//减去一天包含了当前日期
              } else {
                return true;
              }
            },
          },}

    效果 前后都禁用

  • 相关阅读:
    实现168732363.66元用逗号格式为168,732,363.66元
    程序员的十步学习法
    js中字符串方法大全
    js中数组方法大全
    异常,常用工具
    抽象类,常用类
    this 关键字
    面向对象
    DOS.JDK
    Android
  • 原文地址:https://www.cnblogs.com/xiaohuasan/p/16229733.html
Copyright © 2020-2023  润新知