el-date-picker默认时间为上月（默认为当月）

最新推荐文章于 2024-07-05 16:32:20 发布

原创最新推荐文章于 2024-07-05 16:32:20 发布 · 3.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

element 专栏收录该内容

12 篇文章

订阅专栏

该项目场景涉及Vue.js应用中的el-date-picker组件，用于选择月份。在HTML代码中，通过type=month和value-format=yyyyMM设置显示格式。在JavaScript的created生命周期钩子中，利用Date对象计算并设置默认值，实现显示上月或本月。通过调整日期，可以切换默认显示的月份。

项目场景：

项目场景：默认el-date-picker组件时间为上月或者本月

在这里插入图片描述

解决方案：

1.html代码

<el-date-picker
     v-model="value"
     type="month"
     placeholder="选择月份"
     value-format="yyyyMM"
>
</el-date-picker>

2.js代码

data() {
    return {     
      value: "",
    };
  },
  //懒得封装方法，直接写生命周期里了，习惯代码规范的可以自行封装放入方法
created() {
    //默认显示上月日期
    let date = new Date(new Date() - 30 * 24 * 3600 * 1000);
    this.value =
      date.getFullYear() +
      (date.getMonth() + 1 < 10 ? "0" : "") +
      (date.getMonth() + 1);
    console.log(this.value );   //202212

	//默认显示当月日期
    let date = new Date(new Date());
    this.value =
      date.getFullYear() +
      (date.getMonth() + 1 < 10 ? "0" : "") +
      (date.getMonth() + 1);
    console.log(this.value );   //202301

  },