起止时间限制结束时间必须大于开始时间时间插件 el-date-picker

星空小梦

已于 2023-10-11 14:48:28 修改

阅读量190

点赞数

文章标签： vue.js elementui javascript

于 2023-03-20 16:34:02 首次发布

本文链接：https://blog.csdn.net/weixin_50885665/article/details/129670430

版权

el-date-picker 样式修改: https://blog.csdn.net/weixin_50885665/article/details/125073983

<el-form-item label="轮训起止日期" prop="rotationStartTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.rotationStartTime"
              :picker-options="pickerOptionsStart"
              value-format="yyyy-MM-dd"
              clearable
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item label prop="rotationEndTime">
              <el-date-picker
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                v-model="form.rotationEndTime"
                :picker-options="pickerOptionsEnd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

data中:

 // 起始日期限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.rotationEndTime) {
            return (
              time.getTime() > new Date(this.form.rotationEndTime).getTime()
            );
          }
        }
      },
      // 终止日期限制
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            time.getTime() <
            new Date(this.form.rotationStartTime).getTime() -
              1 * 24 * 60 * 60 * 1000
          );
        }
      }