vue element ui 时间选择器设置两个时间一前一后

最新推荐文章于 2024-09-09 09:58:06 发布

洛洛啊洛洛

最新推荐文章于 2024-09-09 09:58:06 发布

阅读量3.7k

点赞数 2

文章标签： vue.js javascript es6 html

本文链接：https://blog.csdn.net/pegmca/article/details/105131473

版权

时间选择器，需求是下线时间必须在发布时间之后，但后台是储存两个值，就没使用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;
        }
      };
    }
  }