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,'结束')
    },

效果如图:可以选择7月到7月,也可以选择7-8月等。。 

猜你喜欢

转载自blog.csdn.net/weixin_43923808/article/details/131581420
今日推荐