element ui 日期选择器选择日期范围添加默认值

最新推荐文章于 2024-10-10 17:32:28 发布

JMS_兔子

最新推荐文章于 2024-10-10 17:32:28 发布

阅读量1.3k

点赞数 3

分类专栏： js vue 前端文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/qq_43503450/article/details/128613546

版权

vue 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端

23 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js应用中使用el-date-picker组件来创建一个日期范围选择器。它设置了开始和结束日期占位符，以及日期格式，并利用getToday和getThreeDaysAgo方法初始化日期范围。

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

标签

<el-date-picker
            v-model="dateValue"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
</el-date-picker>

 data() {
    return {
      dateValue: [],
    }
}

  mounted() {
     let startDate = this.getThreeDaysAgo();
    let endDate = this.getToday();
    this.dateValue.push(startDate,endDate);
},

  methods: {
    getToday() {
      //获取当前日期
      let myDate = new Date();
      let nowY = myDate.getFullYear();
      let nowM = myDate.getMonth() + 1;
      let nowD = myDate.getDate();
      let endDate =
        nowY +
        "-" +
        (nowM < 10 ? "0" + nowM : nowM) +
        "-" +
        (nowD < 10 ? "0" + nowD : nowD); //当前日期
      return endDate;
    },
    getThreeMonAgo() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 90); //最后一个数字可改，天数
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD); 
      return startData;
    },
}