Vue Date 今天的开始时间与结束时间

在 Vue 项目里，要获取今天的开始时间与结束时间，可借助 JavaScript 的 Date 对象来实现。

在 JavaScript 里，date.getFullYear() 是 Date 对象的一个方法，主要用于获取 Date 对象所表示日期的年份，返回值是一个四位数的整数，代表具体的年份。

<template><div><p>今天的开始时间: {{ startOfDay }}</p><p>今天的结束时间: {{ endOfDay }}</p></div>
</template><script>
export default {data() {return {startOfDay: '',endOfDay: ''};},mounted() {// 获取今天的开始时间和结束时间const today = new Date();// 设置开始时间const start = new Date(today);start.setHours(0, 0, 0, 0);// 设置结束时间const end = new Date(today);end.setHours(23, 59, 59, 999);// 格式化时间this.startOfDay = this.formatDate(start);this.endOfDay = this.formatDate(end);},methods: {//用于把 Date 对象格式化为 YYYY-MM-DD HH:MM:SS 的字符串。formatDate(date) {const year = date.getFullYear();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');return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;}}
};
</script>

padStart() 是 JavaScript 字符串对象的一个方法，用于在字符串的开头填充指定的字符，直到字符串达到指定的长度。这在需要对字符串进行格式化，使其保持固定长度时非常有用，比如在日期格式化时，确保月份、日期等为两位数。

昨天的开始时间与结束时间

// 获取当前日期const today = new Date();// 获取昨天的日期const yesterday = new Date(today);yesterday.setDate(yesterday.getDate() - 1);// 设置昨天的开始时间const start = new Date(yesterday);start.setHours(0, 0, 0, 0);// 设置昨天的结束时间const end = new Date(yesterday);end.setHours(23, 59, 59, 999);// 格式化时间this.startOfYesterday = this.formatDate(start);this.endOfYesterday = this.formatDate(end);

获取本周的开始时间与结束时间

 // 获取当前日期const today = new Date();// 获取今天是星期几（0 表示星期日，1 - 6 分别表示星期一到星期六）const dayOfWeek = today.getDay();// 计算本周的第一天（星期一）const startOfWeekDate = new Date(today);startOfWeekDate.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));startOfWeekDate.setHours(0, 0, 0, 0);// 计算本周的最后一天（星期日）const endOfWeekDate = new Date(startOfWeekDate);endOfWeekDate.setDate(startOfWeekDate.getDate() + 6);endOfWeekDate.setHours(23, 59, 59, 999);// 格式化时间this.startOfWeek = this.formatDate(startOfWeekDate);this.endOfWeek = this.formatDate(endOfWeekDate);

获取上周的开始时间与结束时间

可以先计算出本周的开始时间，然后在此基础上往前推 7 天得到上周的开始时间，再将上周开始时间加上 6 天得到上周的结束时间，最后分别设置这两个时间的具体时刻（开始时间为 00:00:00，结束时间为 23:59:59.999）。

 // 获取当前日期const today = new Date();// 获取今天是星期几（0 表示星期日，1 - 6 分别表示星期一到星期六）const dayOfWeek = today.getDay();// 计算本周的第一天（星期一）const startOfThisWeek = new Date(today);startOfThisWeek.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));// 计算上周的第一天const startOfLastWeekDate = new Date(startOfThisWeek);startOfLastWeekDate.setDate(startOfThisWeek.getDate() - 7);startOfLastWeekDate.setHours(0, 0, 0, 0);// 计算上周的最后一天const endOfLastWeekDate = new Date(startOfLastWeekDate);endOfLastWeekDate.setDate(startOfLastWeekDate.getDate() + 6);endOfLastWeekDate.setHours(23, 59, 59, 999);// 格式化时间this.startOfLastWeek = this.formatDate(startOfLastWeekDate);this.endOfLastWeek = this.formatDate(endOfLastWeekDate);

获取本月的开始时间与结束时间

 // 获取当前日期const today = new Date();// 计算本月的开始时间const start = new Date(today.getFullYear(), today.getMonth(), 1, 0, 0, 0, 0);// 计算下个月的第一天const nextMonthFirstDay = new Date(today.getFullYear(), today.getMonth() + 1, 1);// 本月的最后一天（下个月第一天往前推一天）const lastDay = new Date(nextMonthFirstDay - 1);// 设置结束时间const end = new Date(lastDay);end.setHours(23, 59, 59, 999);// 格式化时间this.startOfMonth = this.formatDate(start);this.endOfMonth = this.formatDate(end);

获取上月的开始时间与结束时间

 // 获取当前日期const today = new Date();// 计算上月的开始时间const start = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0, 0, 0, 0);// 计算本月的第一天const thisMonthFirstDay = new Date(today.getFullYear(), today.getMonth(), 1);// 上月的最后一天（本月第一天往前推一天）const lastDay = new Date(thisMonthFirstDay - 1);// 设置结束时间const end = new Date(lastDay);end.setHours(23, 59, 59, 999);// 格式化时间this.startOfLastMonth = this.formatDate(start);this.endOfLastMonth = this.formatDate(end);

获取当前季度的开始时间和结束时间

 // 获取当前日期const today = new Date();const currentMonth = today.getMonth();// 确定当前季度的起始月份const startMonth = Math.floor(currentMonth / 3) * 3;// 计算当前季度的开始时间const start = new Date(today.getFullYear(), startMonth, 1, 0, 0, 0, 0);// 确定当前季度的结束月份const endMonth = startMonth + 2;// 计算当前季度结束月份的下一个月的第一天const nextMonthFirstDay = new Date(today.getFullYear(), endMonth + 1, 1);// 当前季度的最后一天（下一个月第一天往前推一天）const lastDay = new Date(nextMonthFirstDay - 1);// 设置结束时间const end = new Date(lastDay);end.setHours(23, 59, 59, 999);// 格式化时间this.startOfQuarter = this.formatDate(start);this.endOfQuarter = this.formatDate(end);

获取指定季度的开始时间和结束时间

<template><div><button @click="getQuarterTime(2024, 1)">获取 2024 年第一季度时间</button><button @click="getQuarterTime(2024, 2)">获取 2024 年第二季度时间</button><button @click="getQuarterTime(2024, 3)">获取 2024 年第三季度时间</button><button @click="getQuarterTime(2024, 4)">获取 2024 年第四季度时间</button><p v-if="startOfQuarter">指定季度的开始时间: {{ startOfQuarter }}</p><p v-if="endOfQuarter">指定季度的结束时间: {{ endOfQuarter }}</p></div>
</template><script>
export default {data() {return {startOfQuarter: '',endOfQuarter: ''};},methods: {getQuarterTime(year, quarter) {// 计算指定季度的起始月份const startMonth = (quarter - 1) * 3;// 计算指定季度的开始时间const start = new Date(year, startMonth, 1, 0, 0, 0, 0);// 计算指定季度的结束月份const endMonth = startMonth + 2;// 计算指定季度结束月份的下一个月的第一天const nextMonthFirstDay = new Date(year, endMonth + 1, 1);// 指定季度的最后一天（下一个月第一天往前推一天）const lastDay = new Date(nextMonthFirstDay - 1);// 设置结束时间const end = new Date(lastDay);end.setHours(23, 59, 59, 999);// 格式化时间this.startOfQuarter = this.formatDate(start);this.endOfQuarter = this.formatDate(end);},formatDate(date) {const year = date.getFullYear();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');return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;}}
};
</script>