el-date-picker开始时间不能大于结束时间且能选择同一天

最新推荐文章于 2024-06-09 20:17:27 发布

Reset the brain

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量499

点赞数 6

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_58785499/article/details/135674620

版权

<el-row>
              <el-col :span="11">
                <el-form-item label="起始时间">
                  <el-date-picker
                  type="date"
                  placeholder="请选择起始时间"
                  value-format="yyyy-MM-dd"
                  :disabled="disabled"
                  v-model="resourceEditData.startTime"
                  style="width: 100%;"
                  :picker-options="pickerOptionsStart"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-form-item></el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="结束时间">
                  <el-date-picker
                  type="date"
                  placeholder="请选择结束时间"
                  value-format="yyyy-MM-dd"
                  :disabled="disabled"
                  v-model="resourceEditData.endTime"
                  style="width: 100%;"
                  :picker-options="pickerOptionsEnd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

关键属性picker-options

 // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.resourceEditData.endTime) {
            return (
              time.getTime() >= new Date(this.resourceEditData.endTime).getTime()
            );
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.resourceEditData.startTime) {
            return (
              time.getTime() <= new Date(this.resourceEditData.startTime).getTime()-8.64e7
            );
          }
        }
      },

其中关键值控制能否选择同一天 -8.64e7