时间选择器,需求是下线时间必须在发布时间之后,但后台是储存两个值,就没使用element UI 的范围选择器
在标签设置:picker-options 属性,该属性下disabledDate(),控制禁用项,参数为每天的时间,最后使用计算属性
computed 动态计算出下线时间可用的值。

       <el-date-picker
          v-model="ruleForm.publishDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="publishDateAfter"
          :default-value="ruleForm.publishDate"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="下线时间" prop="offlineDate">
        <el-date-picker
          v-model="ruleForm.offlineDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="offlineDateAfter"
          :default-value="ruleForm.offlineDate"
          placeholder="选择日期时间"
          :disabled="isSelPub"
        ></el-date-picker>

在这里插入图片描述
这里时间选择器不提供时分秒的控制,所以只能控制日期的

computed: {
    publishDateAfter() {
      // 动态起始时间
      const startTimestamp = Date.now() * 1 - 24 * 60 * 60 * 1000;
      const endTimestamp =
        Date.parse(this.ruleForm.offlineDate) * 1 - 24 * 60 * 60 * 1000;
      return {
        disabledDate(time) {
          const timestamp = time.getTime();
          if (endTimestamp) {
            if (timestamp >= startTimestamp && timestamp <= endTimestamp) {
              return false;
            } else {
              return true;
            }
          } else {
            return timestamp <= startTimestamp;
          }
        }
      };
    },
    offlineDateAfter() {
      // 动态起始时间
      const startTimestamp = Date.parse(this.ruleForm.publishDate) * 1;
      return {
        disabledDate(time) {
          const timestamp = time.getTime();
          if (timestamp >= startTimestamp) {
            return false;
          }
          return true;
        }
      };
    }
  }

Logo

前往低代码交流专区

更多推荐