uniapp获取一周时间和星期

admin 2026年03月31日 06:13 103 0

在uniapp中获取一周时间及星期，可通过JavaScript的Date对象实现，首先获取当前日期，用getDay()方法返回星期几（0为周日，1为周一，以此类推），计算本周起始日期（如周一或周日），通过循环生成7天日期，使用getTime()进行日期加减，格式化为YYYY-MM-DD，结合getDay()结果映射中文星期（如“周一”“周日”），最终生成包含日期和星期的数组，核心代码包括日期计算、循环遍历及星期映射，可灵活适配不同起始日期需求，适用于日历、排期等场景。

Uniapp 获取一周时间范围及对应星期的高效实现指南

在开发基于 Uniapp 的各类应用时，如日历组件、排班系统、周计划管理、活动安排等功能，经常需要动态获取并展示“一周时间范围”及其对应的“星期几”，本文将深入探讨如何利用 JavaScript 的原生 `Date` 对象，在 Uniapp 环境中高效实现获取当前周或指定周的起止日期，并生成包含日期和对应星期信息的完整数组，文中提供可直接复用的完整代码示例,并解析关键逻辑点。

核心实现思路：基于 Date 对象的日期推算

Uniapp 主要基于 Vue.js 构建，其前端逻辑完全由 JavaScript/TypeScript 处理,获取一周时间范围及对应星期的核心步骤如下：

获取基准日期：通过 `new Date()` 创建日期对象，获取年、月、日等时间信息作为计算起点。
定位本周起始日（周一）：根据 `getDay()` 方法返回的星期索引（0=周日, 1=周一, ..., 6=周六），结合国内普遍以周一作为一周起始的习惯,计算出本周一的日期。
构建完整一周日期数组：以本周一为基准，循环 6 次，依次推算周二至周日的日期,构建包含完整一周日期的数组。
格式化日期与星期：将日期对象格式化为目标字符串（如 `YYYY-MM-DD`），并将星期几转换为易于显示的中文（如“周一”、“周二”）。

完整代码实现

以下是在 Uniapp 页面中实现获取一周时间和星期的完整代码，包含模板、样式和逻辑,可直接复制到项目中使用。

页面结构 (template)

<template>
  <view class="container">
    <view class="week-title">{{ weekRange }}</view>
    <view class="week-list">
      <view class="week-item" v-for="(item, index) in weekDates" :key="index">
        <view class="date">{{ item.date }}</view>
        <view class="weekday">{{ item.weekday }}</view>
      </view>
    </view>
    <view class="week-controls">
      <button class="control-btn" @click="getLastWeek">上周</button>
      <button class="control-btn" @click="getThisWeek">本周</button>
      <button class="control-btn" @click="getNextWeek">下周</button>
    </view>
  </view>
</template>

样式 (style)

<style>
.container {
  padding: 20rpx;
}
.week-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
  color: #333;
}
.week-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30rpx;
}
.week-item {
  width: 14%;
  text-align: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #f5f7fa;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.date {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.weekday {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
}
.week-controls {
  display: flex;
  justify-content: center;
  gap: 20rpx;
}
.control-btn {
  padding: 20rpx 40rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  transition: background-color 0.3s;
}
.control-btn:active {
  background-color: #0056b3;
}
</style>

逻辑实现 (script)

<script>
// 定义星期常量，避免重复创建数组
const WEEKDAYS_CN = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
export default {
data() {
return {
weekDates: [], // 存储一周日期及星期信息: [{ date: '2024-06-10', weekday: '周一' }, ...]
currentDate: new Date(), // 当前日期（作为切换周的基准）
};
},
computed: {
// 计算并显示当前周的范围（如：2024年6月10日 - 2024年6月16日）
weekRange() {
if (this.weekDates.length < 2) return '';
const startDate = this.weekDates[0].date;
const endDate = this.weekDates[6].date;
return ${startDate} - ${endDate};
}
},
onLoad() {
this.getWeekDates(); // 页面加载时获取当前周数据
},
methods: {
/**

获取指定日期所在周的周一至周日信息
@param {Date} [date=new Date()] - 可选，指定日期对象（默认当前日期）
@returns {Array} - 一周日期数组，格式：[{ date: 'YYYY-MM-DD', weekday: '周一' }, ...]
*/
getWeekDates(date = new Date()) {
const dates = [];
const dayOfWeek = date.getDay(); // 获取当前是周几 (0=周日, 1=周一, ..., 6=周六)

  // 计算本周一的日期
  // 如果当前是周日 (0)，需要减去6天得到周一；否则减去 (dayOfWeek - 1) 天得到周一
  const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  const monday = new Date(date);
  monday.setDate(date.getDate() + diffTo
		    	
        	        		标签：        		    #一周
        		        		    #星期