自定义日期选择（限制开始日期早于结束日期，结束日期晚于开始日期）

最新推荐文章于 2024-06-21 16:41:46 发布

煎饼果子就咖啡

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量180

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_49498516/article/details/130886411

版权

HTML

 <el-form-item label="">
          <el-date-picker
            v-model="queryParams.appointmentStart"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="appointmentStart"
            placeholder="预约开始日期"
          />
          <el-date-picker
            v-model="queryParams.appointmentEnd"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="appointmentEnd"
            placeholder="预约结束日期"
          />
        </el-form-item>

data

 data() {
    return {
      appointmentStart: {
        disabledDate: (time) => {
          let state
          if (this.queryParams.appointmentEnd !== '' && this.queryParams.appointmentEnd != null) {
            state = time.getTime() > new Date(this.queryParams.appointmentEnd).getTime()
          } else {
            state = false
          }
          return state
        }
      },
      appointmentEnd: {
        disabledDate: (time) => {
          let state
          if (this.queryParams.appointmentStart !== '' && this.queryParams.appointmentStart != null) {
            state = time.getTime() < new Date(this.queryParams.appointmentStart).getTime() - 86400000
          } else {
            state = false
          }
          return state
        }
      },
      }
      }