el-calendar和el-date-picker结合使用请求数据（Vue3）

1、需求

使用月份选择器选择年月份，日历跳转当月并进行数据查询渲染（时间最终都转换为秒级时间戳跟默认毫秒级时间戳相差1000），点击某天进行数据编辑（触发事件可根据需求自行更改）

2、/energy-consumption-data/get?orgId=${orgId}&startTime=${startTime}&endTime=${endTime}

根据接口，只需要每次根据月份选择器改变时算出对应开始时间和结束时间即可

3、与上文的日历（上个月今天下个月三个按钮功能不同）

4、效果图

<el-col :span="16">
        <div class="con-list">
          <!-- 日历 -->
          <el-calendar ref="calendar" v-model="currentDate">
            <template #header="{ date }">
              <span>{{ date }}</span>
              <el-date-picker
                v-model="value2"
                type="month"
                placeholder="请选择"
                :disabled-date="disabledDate"
                @change="changeDate"
              />
            </template>
            <!-- 插槽 -->
            <template #date-cell="{ data }">
              <div>
                <div>
                  {{ data.day.split("-")[2] }}
                </div>
                <div
                  style="font-size: 12px"
                  v-for="(item, index) in textContent(data.day)"
                  :key="index"
                  @click="handleCellClick(data, item)"
                >
                  <div style="display: flex; justify-content: center">
                    <div style="width: 80px">
                      <span style="color: #f9a006"
                        >源：{{
                          item.heatSourceDailyHm == 0
                            ? "-"
                            : item.heatSourceDailyHm
                        }}</span
                      >
                    </div>
                    <div style="width: 80px">
                      <span style="color: #ff3b30"></span>
                    </div>
                  </div>
                  <div style="display: flex; justify-content: center">
                    <div style="width: 80px">
                      <span style="color: #ff3b30"
                        >源：{{
                          item.heatSourceDailyHmH == 0
                            ? "-"
                            : item.heatSourceDailyHmH
                        }}</span
                      >
                    </div>
                    <div style="width: 80px">
                      <span style="color: #ff3b30"
                        >网：{{
                          item.heatNetDailyHmH == 0 ? "-" : item.heatNetDailyHmH
                        }}</span
                      >
                    </div>
                  </div>
                  <div style="display: flex; justify-content: center">
                    <div style="width: 80px">
                      <span style="color: #3bd49a"
                        >源：{{
                          item.heatSourceDailyE == 0
                            ? "-"
                            : item.heatSourceDailyE
                        }}</span
                      >
                    </div>
                    <div style="width: 80px">
                      <span style="color: #3bd49a"
                        >网：{{
                          item.heatNetDailyE == 0 ? "-" : item.heatNetDailyE
                        }}</span
                      >
                    </div>
                  </div>
                  <div style="display: flex; justify-content: center">
                    <div style="width: 80px">
                      <span style="color: #328af7"
                        >源：{{
                          item.heatSourceDailyWm == 0
                            ? "-"
                            : item.heatSourceDailyWm
                        }}</span
                      >
                    </div>
                    <div style="width: 80px">
                      <span style="color: #328af7"
                        >网：{{
                          item.heatNetDailyWm == 0 ? "-" : item.heatNetDailyWm
                        }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </div></el-col
      >

点击某天进行编辑

代码如下

<el-dialog v-model="dialogFormVisible" :title="heatSourceTitle" width="35%">
      <el-form :model="form">
        <el-form-item prop="day" label="日期：" label-width="150px">
          {{ form.day }}
        </el-form-item>
        <el-form-item label="热源：" label-width="150px"> </el-form-item>
        <el-form-item label="日耗煤量：" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.heatSourceDailyHm"
            type="number"
            :min="0"
            :precision="2"
            placeholder="请输入"
            autocomplete="off"
            ><template #append>
              <span>t</span>
            </template></el-input
          >
        </el-form-item>
        <el-form-item label="日供热量：" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.heatSourceDailyHmH"
            type="number"
            :min="0"
            :precision="2"
            placeholder="请输入"
            autocomplete="off"
            ><template #append>
              <span>GJ</span>
            </template></el-input
          >
        </el-form-item>
        <el-form-item label="日耗电量：" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.heatSourceDailyE"
            type="number"
            :min="0"
            :precision="2"
            placeholder="请输入"
            autocomplete="off"
            ><template #append>
              <span>Kwh</span>
            </template></el-input
          >
        </el-form-item>
        <el-form-item label="日耗水量：" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.heatSourceDailyWm"
            type="number"
            :min="0"
            :precision="2"
            placeholder="请输入"
            autocomplete="off"
            ><template #append>
              <span>t</span>
            </template></el-input
          >
        </el-form-item>

        <el-form-item label="热网：" label-width="150px"> </el-form-item>

        <el-form-item label="日供热量：" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.heatNetDailyHmH"
            type="number"
            :min="0"
            :precision="2"
            placeholder="请输入"
            autocomplete="off"
            ><template #append>
              <span>GJ</span>
            </template></el-input
          >
        </el-form-item>
        <el-form-item label="日耗电量：" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.heatNetDailyE"
            type="number"
            :min="0"
            :precision="2"
            placeholder="请输入"
            autocomplete="off"
            ><template #append>
              <span>Kwh</span>
            </template></el-input
          >
        </el-form-item>
        <el-form-item label="日耗水量：" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.heatNetDailyWm"
            type="number"
            :min="0"
            :precision="2"
            placeholder="请输入"
            autocomplete="off"
            ><template #append>
              <span>t</span>
            </template></el-input
          >
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save_edit_engy_info">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>

下面做数据处理

const currentDate = ref(new Date());
//默认当月1号
const startTime = ref(getFirstDayOfMonthTimestamp());
//默认当月最后一天
const endTime = ref(getEndDayOfMonthTimestamp());
const value2 = ref(new Date());
//获取当月第一天时间戳
function getFirstDayOfMonthTimestamp() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();
  const firstDayOfMonth = new Date(year, month, 1);
  firstDayOfMonth.setHours(0, 0, 0, 0);
  return Math.floor(firstDayOfMonth.getTime() / 1000);
}
//获取当月最后一天时间戳
function getEndDayOfMonthTimestamp() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const firstDayOfMonth = new Date(year, month, 1);
  firstDayOfMonth.setHours(0, 0, 0, 0);
  return Math.floor((firstDayOfMonth.getTime() - 86400000) / 1000);
}
// const dateString = "Wed May 01 2024 00:00:00 GMT+0800 (中国标准时间)";
// 入参是某个月的第一天时间 返回这个月最后一天时间戳
function getLastDayOfMonthTimestamp(dateString) {
  const date = new Date(dateString);
  // 获取该月的最后一天
  const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
  // 返回该月最后一天的时间戳秒级
  return Math.floor(lastDayOfMonth.getTime() / 1000);
}
// 时间改变   获取当月最后一天
const changeDate = () => {
  currentDate.value = value2.value;
  endTime.value = getLastDayOfMonthTimestamp(value2.value);
  let date2 = new Date(currentDate.value);
  let timestamp2 = Math.floor(date2.getTime() / 1000);
  startTime.value = timestamp2;
 //时间选择改变这里进行赋值  然后进行数据查询
};
//判断当前月份 超过现在月份在月份选择器不可进行选择
function disabledDate(time) {
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();
  if (
    time.getFullYear() > currentYear ||
    (time.getFullYear() === currentYear && time.getMonth() > currentMonth)
  ) {
    return true;
  }
  return false;
}

const handleCellClick = (data, item) => {
  dialogFormVisible.value = true;
  //在这里通过点击事件打开编辑弹窗进行表单赋值
};