Element ui 设置默认时间显示

最新推荐文章于 2024-07-11 12:19:44 发布

onlylele

最新推荐文章于 2024-07-11 12:19:44 发布

阅读量5.9k

点赞数 4

分类专栏： Element UI

本文链接：https://blog.csdn.net/onlylele/article/details/108964024

版权

Element UI 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文介绍了如何使用ElementUI的时间选择器组件来实现默认时间定位到当前时间后7天，并阻止用户选择当前时间之前的日子。通过`v-model`、`:picker-options`和`:default-time`属性进行配置，并在JavaScript中设置默认时间和验证选择的日期。

摘要由CSDN通过智能技术生成

element ui 选择时间组件：需求：实现默认时间定位于当前时间延后7天的日期；且当前时间之前的日期不能选；

html部分:

            <el-date-picker
                  v-model="shopForm.end_time"
                  type="datetime"
                  size="medium"
                  style="width:100%"
                  placeholder="选择日期时间"
                  :picker-options="expireTimeOption"
                  value-format="timestamp"
                  default-time="00:00:00"
                />

js 部分代码实现:

 data() {
    return {
      shopForm: {
        end_time: ''
      },
      expireTimeOption: {
        disabledDate(date) {
          return date.getTime() <= Date.now() - 8.64e7 // new Date()
        }
      }
    }
  },
 created() {
    this.setTime() // 设置默认时间
  },
  methods: {
    // 默认时间设置 7天后
    setTime() {
      const nowD = new Date()
      nowD.setTime(nowD.getTime() + 7 * 3600 * 1000 * 24)
      this.shopForm.end_time = nowD
    },
    /**
     * 选择时间
     */
    changeendTime() {
      if (this.shopForm.end_time > (Date.now())) {
        this.shopForm.end_time = this.shopForm.end_time
      } else {
        this.shopForm.end_time = ''
        this.$message.error('请选择大于当前日期')
      }
    },
  }