在 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 ="getQuarterTime(2024, 1)">获取 2024 年第一季度时间</button>
<button ="getQuarterTime(2024, 2)">获取 2024 年第二季度时间</button>
<button ="getQuarterTime(2024, 3)">获取 2024 年第三季度时间</button>
<button ="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>