element 时间日期选择器从00:00:00-23:59:59

 默认选取近30天 且时间从00:00:00-23:59:59

 选取范围30天，且不可清空

<template>
  <el-form>
    <el-form-item label="日期时间：">
      <el-date-picker
        v-model="time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        :clearable="false"
        :picker-options="pickerOptions"
        @focus="handleFocus"
      ></el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
function formatDate(str) {
  const date = new Date(str);
  const y = date.getFullYear();
  const m =
    date.getMonth() + 1 <= 9 ? `0${date.getMonth()}${1}` : date.getMonth() + 1;
  const d = date.getDate() <= 9 ? `0${date.getDate()}` : date.getDate();
  const h = date.getHours() <= 9 ? `0${date.getHours()}` : date.getHours();
  const min =
    date.getMinutes() <= 9 ? `0${date.getMinutes()}` : date.getMinutes();
  const s =
    date.getSeconds() <= 9 ? `0${date.getSeconds()}` : date.getSeconds();

  return `${[y, m, d].join("-")} ${[h, min, s].join(":")}`;
}
function DateTime() {
  const timeStamp = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
  const nextDay = timeStamp + 86400 * 1; // 一天后 的00:00
  const beforeDay = nextDay - 86400 * 30; // 30天前的00:00
  return [
    formatDate(new Date(beforeDay * 1000)),
    formatDate(new Date(nextDay * 1000 - 1000)),
  ];
}
export default {
  data() {
    return {
      time: DateTime(), //赋值默认时间
      pickerMinDate: null,
      pickerMaxDate: null,
      day30: 29 * 24 * 3600 * 1000,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          //只可以选择30天内的
          if (this.pickerMinDate) {
            return (
              time.getTime() > this.pickerMinDate + this.day30 ||
              time.getTime() < this.pickerMinDate - this.day30
            );
          }
          return false;
        },
      },
    };
  },
  methods: {
    // 去掉面板中的清空按钮
    handleFocus() {
      setTimeout(() => {
        document
          .getElementsByClassName("el-picker-panel")
          ?.forEach((item, i) => {
            document
              .getElementsByClassName("el-picker-panel")
              [i].getElementsByClassName("el-button")[0].style.display = "none";
          });
      }, 100);
    },
  },
};
</script>