首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue el-date-picker 开始日期不能大于结束日期

vue el-date-picker 开始日期不能大于结束日期的实现代码

2024-01-26 15:23:40 作者：guochanof

这篇文章主要介绍了vue el-date-picker 开始日期不能大于结束日期的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

HTML

      <el-form-item label="开始日期" prop="startTime">
        <el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStartq" placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="endTime">
        <el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEndq" placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>

JS: (写在data内)

满足开始日期不能大于结束日期,并且****几种情况如下:

开始日期不能大于结束日期

      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endTime) {
            return (
              time.getTime() >
              new Date(this.form.endTime).getTime() -
                1 * 24 * 60 * 60 * 1000
            );
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            time.getTime() <
            new Date(this.form.startTime).getTime() -
              8.64e7 +
              1 * 24 * 60 * 60 * 1000
          );
        }
      },

开始日期不能大于结束日期 --选择今天以后的日期--今天可选

      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() >
                new Date(this.form.endTime).getTime() - 1 * 24 * 60 * 60 * 1000
            );
          }
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() <
              new Date(this.form.startTime).getTime() -
                8.64e7 +
                1 * 24 * 60 * 60 * 1000
          );
        }
      },

开始日期不能大于结束日期--选择今天以后的日期--今天不可选

      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() >
                new Date(this.form.endTime).getTime() - 1 * 24 * 60 * 60 * 1000
            );
          }
          return time.getTime() < Date.now();
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() ||
            time.getTime() <
              new Date(this.form.startTime).getTime() -
                8.64e7 +
                1 * 24 * 60 * 60 * 1000
          );
        }
      },

开始日期不能大于结束日期--选择今后一年内的日期

      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endTime) {
            return (
              time.getTime() <
              new Date(this.form.endTime).getTime() - 365 * 24 * 60 * 60 * 1000
            );
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            time.getTime() >
            new Date(this.form.startTime).getTime() +
              8.64e7 +
              365 * 24 * 60 * 60 * 1000
          );
        }
      },

只有一个日期框, 要求只能选今天以后的

      pickerOptions: {
        disabledDate: time => {
          // return time.getTime() < Date.now() - 8.64e7; // 今天可选
          return time.getTime() < Date.now();//今天不可选
        }
      },

到此这篇关于vue el-date-picker 开始日期不能大于结束日期的文章就介绍到这了,更多相关vue el-date-picker 开始日期不能大于结束日期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！