讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在 JavaScript 中获取从今天起连续七天的日期与星期信息

陌杰君_5277

陌杰君_5277

发布时间:2026-02-12 21:20:47

|

1096人浏览过

|

来源于php中文网

原创

如何在 JavaScript 中获取从今天起连续七天的日期与星期信息

本文详解如何使用原生 javascript 生成从今日开始连续 7 天的日期数组,包含完整星期名称、格式化日期,并提供可直接集成的代码示例与关键注意事项。

在开发预约类应用(如图书预约、日程管理或服务预订系统)时,常需按周维度展示可选日期范围——例如“今日起未来 7 天”的日期栏(含周一至周日),并将其作为 Firebase 查询条件(如 where('date', 'in', dateRange))。此时,核心需求并非相对时间(如“3 小时前”),而是确定性、格式统一、带星期标识的未来 7 天日期序列。

以下为推荐的原生 JavaScript 实现方案(无需依赖库,兼容性好,逻辑清晰):

/**
 * 获取从今天起连续 7 天的日期信息数组
 * 每项包含:完整日期字符串(YYYY-MM-DD)、星期缩写(如 Mon)、中文星期(可选)、原始 Date 对象
 */
function getNextSevenDays() {
  const today = new Date();
  const result = [];

  for (let i = 0; i < 7; i++) {
    const date = new Date(today);
    date.setDate(today.getDate() + i);

    // 标准化日期格式:YYYY-MM-DD(推荐用于 Firebase 查询和排序)
    const yyyy = date.getFullYear();
    const mm = String(date.getMonth() + 1).padStart(2, '0');
    const dd = String(date.getDate()).padStart(2, '0');
    const isoDate = `${yyyy}-${mm}-${dd}`;

    // 星期缩写(英文,如 'Mon')和完整名称(如 'Monday')
    const weekShort = date.toLocaleDateString('en-US', { weekday: 'short' });
    const weekFull = date.toLocaleDateString('en-US', { weekday: 'long' });

    // 可选:中文星期(适配中文 UI)
    const weekCN = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()];

    result.push({
      date: isoDate,           // ✅ 推荐用于数据库查询(字符串,可排序)
      weekdayShort: weekShort,
      weekdayFull: weekFull,
      weekdayCN: weekCN,
      timestamp: date.getTime(), // ✅ 如需时间戳存储/比较
      fullDate: date           // 原始 Date 对象(供进一步操作)
    });
  }

  return result;
}

// 使用示例
const weekRange = getNextSevenDays();
console.log(weekRange);
// 输出示例:
// [
//   { date: "2024-06-10", weekdayShort: "Mon", weekdayCN: "星期一", ... },
//   { date: "2024-06-11", weekdayShort: "Tue", weekdayCN: "星期二", ... },
//   ...
// ]

✅ 关键优势说明:

  • ISO 8601 格式(YYYY-MM-DD):确保字符串可直接用于 Firebase 的 where('date', '>=', '2024-06-10') 等范围查询,且天然支持字典序排序;
  • 预计算星期信息:避免在渲染层重复调用 toLocaleDateString(),提升性能;
  • 返回完整 Date 对象:便于后续做时间加减、时区处理或格式转换;
  • 零外部依赖:纯原生实现,无 dayjs/moment 等包体积开销,适合轻量级应用。

⚠️ 重要注意事项:

Java Maven Code Review
Java Maven Code Review

审查Java Maven项目(ZIP压缩包或GitLab仓库URL),检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

立即学习“Java免费学习笔记(深入)”;

  • 时区安全:上述代码基于浏览器本地时区。若需服务端统一时区(如 UTC),请改用 date.getUTCFullYear() 等方法构造 ISO 字符串;
  • Firebase 存储建议:在 Firestore 中,优先将日期字段存为 timestamp 类型(而非字符串),再配合 toDate().toDateString() 或 format('YYYY-MM-DD') 在前端生成展示用日期——既保证查询精度,又避免字符串比较陷阱;
  • 边界场景:跨月/跨年时 setDate() 自动处理(如 1 月 31 日 + 3 天 → 2 月 3 日),无需额外判断。

最后,将生成的 weekRange 数组传递给 UI 组件或用于构建 Firebase 查询条件即可:

// 示例:查询本周所有预约(假设数据中 date 字段为字符串 YYYY-MM-DD)
const dateStrings = weekRange.map(d => d.date);
const snapshot = await getDocs(
  query(collection(db, 'appointments'), where('date', 'in', dateStrings))
);

掌握此模式,即可稳健支撑各类以“周”为粒度的时间筛选业务,兼顾准确性、可维护性与扩展性。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

更多
format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1689

2023.07.31

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1211

2024.06.27

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1678

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2524

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

5964

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

5369

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

7074

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

10034

2024.04.29

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

20

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn