Element UI date component - select the month specific to the last day of the month

Element's existing month selection component can only display the 1st of the start month to the 1st of the end month (for example: the start month is March, the end month is March, and the input box can only display 2023-03-01 to 2023-03-01), but what we want to display is the date range from 2023-03-01 to 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,'结束')
    },

The effect is as shown in the figure: you can choose from July to July, or you can choose from July to August.

 

Guess you like

Origin blog.csdn.net/weixin_43923808/article/details/131581420