vue3+ts ＜script setup lang=“ts“＞ element-plus的el-date-picker设置默认日期

效果图（单个日期）：

 utils.ts：

/**
 * 格式化时间戳
 * @param {number} timestamp 时间戳
 * @param {string} format 格式
 * @returns {string}
 */
export const formatTimeStamp = (timestamp: number, format: string) => {
  if (!timestamp) return;
  const date = new Date(timestamp);
  const year = date.getFullYear().toString();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  // 替换格式字符串中的占位符
  const formattedDate = format
    .replace("YYYY", year)
    .replace("mm", month)
    .replace("dd", day)
    .replace("HH", hours)
    .replace("MM", minutes)
    .replace("SS", seconds);

  return formattedDate;
};

页面（单个日期）：

       <el-form-item prop="install_date" label="安装日期:">

          <el-date-picker

            v-model="siteInfo.install_date"

            type="date"

            placeholder="安装日期"

            value-format="YYYY-MM-DD"

          />

        </el-form-item>

<script setup lang="ts">
import { formatTimeStamp } from "/@/utils/utils";
let siteInfo = reactive({
install_date: formatTimeStamp(new Date().getTime(), "YYYY-mm-dd"),
});
</script>

效果图（日期区间）：

 dates.ts:

// 格式化日期：yyyy-MM-dd
export const formatDate = function (date: any) {
  const myyear = date.getFullYear();
  let mymonth = date.getMonth() + 1;
  let myweekday = date.getDate();
  if (mymonth < 10) {
    mymonth = "0" + mymonth;
  }
  if (myweekday < 10) {
    myweekday = "0" + myweekday;
  }
  return myyear + "-" + mymonth + "-" + myweekday;
};
// 获得某月的天数
function getMonthDays(myMonth: any) {
  const monthStartDate = new Date(nowYear, myMonth, 1) as any;
  const monthEndDate = new Date(nowYear, myMonth + 1, 1) as any;
  const days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
  return days;
}

页面（日期区间）：

       <el-form-item label="日期">
            <el-date-picker
              class="gf-input"
              v-model="query.dateTime"
              range-separator="至"
              value-format="YYYY-MM-DD"
              type="daterange"
              unlink-panels
              @change="onSearch"
            >
            </el-date-picker>
          </el-form-item>

<script setup lang="ts">
import { formatDate } from "/@/utils/dates";
const query = reactive({
  dateTime: [
    formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)),
    formatDate(new Date(new Date().getTime()))
  ] as any
});
</script>