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

时间选择器联动控制

最新推荐文章于 2024-04-25 09:15:24 发布

原创最新推荐文章于 2024-04-25 09:15:24 发布 · 3.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #es6 #html

本文介绍了一种在前端开发中实现发布时间与下线时间联动控制的方法，通过使用ElementUI组件库中的时间选择器，结合计算属性和picker-options属性，确保下线时间始终晚于发布时间，避免了直接使用范围选择器可能带来的复杂性和局限性。

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