el-date-picker设置默认时间为本月

最新推荐文章于 2025-02-20 16:13:10 发布

原创最新推荐文章于 2025-02-20 16:13:10 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

文章介绍了如何在Vue应用中使用ElementUI的el-date-picker组件设置日期范围，包括初始化默认日期和获取本月的第一天到最后一天的方法。

<el-form-item label="创建时间">
  <el-date-picker
    v-model="dateRange"
    size="small"
    style="width: 200px"
    value-format="yyyy-MM-dd"
    type="daterange"
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  ></el-date-picker>
</el-form-item>

created() {
  this.setDefaultDate();
}

methods:{

setDefaultDate() {
  const start = new Date();
  const end = new Date();
  const year = start.getFullYear();
  const month = start.getMonth();

  // 本月第一天
  start.setDate(1);
  start.setHours(0, 0, 0, 0);

  // 本月最后一天
  end.setMonth(month + 1);
  end.setDate(0);
  end.setHours(23, 59, 59, 999);

  this.dateRange = [start, end];
}

}