vue element el-date-picker日期选择器上来获取默认时间

最新推荐文章于 2024-08-30 17:44:11 发布

原创最新推荐文章于 2024-08-30 17:44:11 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

js 同时被 2 个专栏收录

75 篇文章

订阅专栏

vue

49 篇文章

订阅专栏

这篇博客介绍了如何在 Vue Element 中使用日期选择器组件设置默认的7天时间范围。通过JavaScript计算当前时间并减去7天作为起始日期，然后将结果格式化为日期字符串。在组件创建时，将计算出的日期范围赋值给搜索表单的时间值，实现了日期选择器的默认显示效果。

##vue element日期选择器上来获取默认时间

<el-form-item label="开单日期：">
          <el-date-picker
            v-model="seachForm.timeValue"
            :editable="false"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

 computed: {
    // 默认时间
    timeDefault() {
      let date = new Date();
      // 通过时间戳计算
      let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000; // 转化为时间戳
      let defalutEndTime = date.getTime();
      let startDateNs = new Date(defalutStartTime);
      let endDateNs = new Date(defalutEndTime);
      // 月，日 不够10补0
      defalutStartTime =
        startDateNs.getFullYear() +
        "-" +
        (startDateNs.getMonth() + 1 >= 10
          ? startDateNs.getMonth() + 1
          : "0" + (startDateNs.getMonth() + 1)) +
        "-" +
        (startDateNs.getDate() >= 10
          ? startDateNs.getDate()
          : "0" + startDateNs.getDate());
      defalutEndTime =
        endDateNs.getFullYear() +
        "-" +
        (endDateNs.getMonth() + 1 >= 10
          ? endDateNs.getMonth() + 1
          : "0" + (endDateNs.getMonth() + 1)) +
        "-" +
        (endDateNs.getDate() >= 10
          ? endDateNs.getDate()
          : "0" + endDateNs.getDate());
      return [defalutStartTime, defalutEndTime];
    },
  },

初始化

 created() {
    // 默认7天日期
    this.seachForm.timeValue = this.timeDefault;
  },

在这里插入图片描述