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-pickerv-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-pickerclass="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>