Element UI日期组件-选择月份具体到当月最后一天-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI日期组件-选择月份具体到当月最后一天。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Element已有的月份选择组件，只能展示开始月份的1号到结束月份的1号（例如：开始月份为3月，结束月份为3月，input框内只能展示2023-03-01至2023-03-01），但是我们的需求想要展示的是2023-03-01至2023-03-31这样的日期范围。


<template>
  <div>
    <el-date-picker
      v-model="search.date"
      type="monthrange"
      size="small"
      format="yyyy-MM-dd"
      value-format="timestamp"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
      @change="(value) => changeMonth(value, 'search')"
    >
    </el-date-picker>
  </div>
</template>

    changeMonth(value, str){
      //查询当前月份月初到月末
      let myDate = new Date(value[1]);
      let month = myDate.getMonth() + 1;
      month = month < 10 ? "0" + month : month;   //格式化月份，补0
      let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
      this.search.date = [value[0], value[1] + (dayEnd - 1) * 86400000]
console.log(value[0],'开始')
console.log(value[1] + (dayEnd - 1) * 86400000,'结束')
    },