效果图(单个日期):
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>