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

mind

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





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


既然组件配置不支持这样展示，没办法了，那就拿时间戳转换吧：

[JavaScript] 纯文本查看 复制代码

<template>
    <div>
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="query.timeRange"
                type="monthrange"
                size="small"
                value-format="timestamp"
                format="yyyy-MM-dd"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="(value) => changeMonth(value, 'search')"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
        // 选择的日期小于等于当前日期（不包含今天）
          return time.getTime() > Date.now()
        },
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  methods: {
    changeMonth(value, str){
      //查询当前月份月初到月末
      let myDate = new Date(value[1]);
      let month = myDate.getMonth() + 1;
      let yearEnd = myDate.getFullYear();
      month = month < 10 ? "0" + month : month;   //格式化月份，补0
      let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
      let currentDate = new Date();
      let currentYear = new Date().getFullYear();
      let currentMonth = new Date().getMonth()+1;
      if(month===currentMonth&&yearEnd===currentYear){
        this.query.timeRange = [value[0], currentDate]
      }else{
        this.query.timeRange = [value[0], value[1] + (dayEnd - 1) * 86400000]
      }
    },
  },
};

from：https://blog.csdn.net/weixin_42157001/article/details/129801685