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 ="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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34840.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML5 drag API实现列表拖拽排序

拖拽API&#xff08;Drag and Drop API&#xff09;是HTML5提供的一组功能&#xff0c;使得在网页上实现拖放操作变得更加简单和强大。这个API允许开发者为网页元素添加拖拽功能&#xff0c;用户可以通过鼠标将元素拖动并放置到指定的目标区域。 事件类型 dragstart&#xff1…

游戏引擎学习第163天

我们可以在资源处理器中使用库 因为我们的资源处理器并不是游戏的一部分&#xff0c;所以它可以使用库。我说过我不介意让它使用库&#xff0c;而我提到这个的原因是&#xff0c;今天我们确实有一个选择——可以使用库。 生成字体位图的两种方式&#xff1a;求助于 Windows 或…

Kafka可视化工具KafkaTool工具的使用

Kafka Tool工具 介绍 使用Kafka的小伙伴&#xff0c;有没有为无法直观地查看 Kafka 的 Topic 里的内容而发过愁呢&#xff1f;下面推荐给大家一款带有可视化页面的Kafka工具&#xff1a;Kafka Tool &#xff08;目前最新版本是 3.0.2&#xff09; 注意&#xff1a;以前叫Kafk…

在Spring Boot项目中接入DeepSeek深度求索,感觉笨笨的呢

文章目录 引言1. 什么是DeepSeek&#xff1f;2. 准备工作2.1 注册DeepSeek账号 3.实战演示3.1 application增加DS配置3.2 编写service3.3 编写controller3.4 编写前端界面chat.html3.5 测试 总结 引言 在当今快速发展的数据驱动时代&#xff0c;企业越来越重视数据的价值。为了…

【数据分析】读取文件

3. 读取指定列 针对只需要读取数据中的某一列或多列的情况&#xff0c;pd.read_csv()函数提供了一个参数&#xff1a;usecols&#xff0c;将包含对应的columns的列表传入该参数即可。 上面&#xff0c;我们学习了读取 "payment" 和 "items_count" 这…

Ubuntu 优化 Vim 指南

Vim 是一款功能强大的文本编辑器&#xff0c;通过合适的配置&#xff0c;可以变成一个接近 IDE 的高效开发工具。本指南提供 最精简、最实用 的 Vim 配置&#xff0c;满足 代码补全、语法高亮、代码格式化、目录管理等常用需求。 1. 必须安装的软件 首先&#xff0c;确保你的系…

信创环境下TOP5甘特图工具对比:从功能到适配性测评

在数字化转型的浪潮中&#xff0c;项目管理的高效与否直接决定了企业能否在激烈的市场竞争中脱颖而出。而甘特图作为项目管理中不可或缺的工具&#xff0c;其重要性不言而喻。尤其是在信创环境日益受到重视的当下&#xff0c;选择一款适配性强、功能完备的甘特图工具&#xff0…

MinIO的预签名直传机制

我们传统使用MinIo做OSS对象存储的应用方式往往都是在后端配置与MinIO的连接和文件上传下载的相关接口&#xff0c;然后我们在前端调用这些接口完成文件的上传下载机制&#xff0c;但是&#xff0c;当并发量过大&#xff0c;频繁访问会对后端的并发往往会对服务器造成极大的压力…

【NLP 38、实践 ⑩ NER 命名实体识别任务 Bert 实现】

去做具体的事&#xff0c;然后稳稳托举自己 —— 25.3.17 数据文件&#xff1a; 通过网盘分享的文件&#xff1a;Ner命名实体识别任务 链接: https://pan.baidu.com/s/1fUiin2um4PCS5i91V9dJFA?pwdyc6u 提取码: yc6u --来自百度网盘超级会员v3的分享 一、配置文件 config.py …

Windows下安装MongoDB 8

在Windows下安装MongoDB&#xff0c;首先需要确定自己的Windows系统版本以及MongoDB社区版所能支持的系统版本。这里使用的是Windows 10操作系统和MongoDB 8.0.4版本。由于MongoDB 6版本之后&#xff0c;不再默认安装Mongo Shell&#xff0c;所以本节分为两部分&#xff1a;安装…

【Node.js入门笔记4---fs 目录操作】

Node.js入门笔记4 Node.js---fs 目录操作一、目录操作1.fs.mkdir()&#xff1a;创建目录。异步&#xff0c;非阻塞。创建单个目录创建多个目录创建目前之前需要确认是否存在&#xff1a; 2. fs.mkdirSync()&#xff1a;用于创建一个新的目录。异步&#xff0c;非阻塞。3.fs.rmd…

DeepSeek-R1思路训练多模态大模型-Vision-R1开源及实现方法思路

刚开始琢磨使用DeepSeek-R1风格训练多模态R1模型&#xff0c;就看到这个工作&#xff0c;本文一起看看&#xff0c;供参考。 先提出问题&#xff0c;仅靠 RL 是否足以激励 MLLM 的推理能力&#xff1f; 结论&#xff1a;不能&#xff0c;因为如果 RL 能有效激励推理能力&#…

Python学习第十八天

Django模型 定义&#xff1a;模型是 Django 中用于定义数据库结构的 Python 类。每个模型类对应数据库中的一张表&#xff0c;类的属性对应表的字段。 作用&#xff1a;通过模型&#xff0c;Django 可以将 Python 代码与数据库表结构关联起来&#xff0c;开发者无需直接编写 S…

总结 HTTP 协议的基本格式, 相关知识以及抓包工具fiddler的使用

目录 1 HTTP是什么 2 HTTP协议格式 3 HTTP请求(Request) 3.1 认识URL 3.2 方法 3.3 认识请求"报头"(header) 3.3.1 Host 3.3.2 Content-Length 3.3.3 Content-Type 3.3.4 User-Agent (简称UA) 3.3.5 Referer 3.3.6 Cookie和Session 4 HTTP响应详解 4.…

【sql靶场】第15、16关-post提交盲注保姆级教程

目录 【sql靶场】第15、16关-post提交盲注保姆级教程 1.知识回顾 ‌GET请求‌ ‌POST请求‌ or与and 2.第十五关 1.布尔盲注的手动注入 1.判断 2.数据库名长度 3.数据库名字符 4.表名数 5.表名长度 6.表名符 7.字段数 8.字段长度 9.字段符 2.布尔盲注的脚本注入…

【C++】 —— 笔试刷题day_6

刷题day_6&#xff0c;继续加油哇&#xff01; 今天这三道题全是高精度算法 一、大数加法 题目链接&#xff1a;大数加法 题目解析与解题思路 OK&#xff0c;这道题题目描述很简单&#xff0c;就是给我们两个字符串形式的数字&#xff0c;让我们计算这两个数字的和 看题目我…

redis终章

1. 缓存(cache) Redis最主要的用途&#xff0c;三个方面1.存储数据&#xff08;内存数据库&#xff09;&#xff1b;2.缓存[redis最常用的场景]&#xff1b;3.消息队列。 缓存(cache)是计算机中的⼀个经典的概念.核⼼思路就是把⼀些常⽤的数据放到触⼿可及(访问速度更快)的地⽅…

Matlab 多输入系统极点配置

1、内容简介 略 Matlab 172-多输入系统极点配置 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 clc close all clear A [-6.5727 1.1902 0 -53.4085;1.1902 -6.5727 0 -53.4085;0.5294 0.5294 0 17.7502;0 0 1 0]; B [1.3797 -0.2498;-0.2498 1.3797;-0.1111 -0.1…

国产编辑器EverEdit - 脚本(解锁文本编辑的无限可能)

1 脚本 1.1 应用场景 脚本是一种功能扩展代码&#xff0c;用于提供一些编辑器通用功能提供不了的功能&#xff0c;帮助用户在特定工作场景下提高工作效率&#xff0c;几乎所有主流的编辑器、IDE都支持脚本。   EverEdit的脚本支持js(语法与javascript类似)、VBScript两种编程…

Flutter 小技巧之通过 MediaQuery 优化 App 性能

许久没更新小技巧系列&#xff0c;温故知新&#xff0c;在两年半前的《 MediaQuery 和 build 优化你不知道的秘密》 我们聊过了在 Flutter 内 MediaQuery 对应 rebuild 机制&#xff0c;由于 MediaQuery 在 MaterialApp 内&#xff0c;并且还是一个 InheritedWidget &#xff0…