当前位置: 首页 > news >正文

vue获取近七天、月份、年份的起始日和结束日

vue获取近七天的起始日和结束日

例如:startDate: 2023-07-29   endDate: 2023-08-04

data() {return {startDate: null,endDate: null}
},
mounted() {this.calculateDateRange();
},
methods: {calculateDateRange() {var currentDate = new Date();var startDate = new Date();startDate.setDate(currentDate.getDate() - 6);this.startDate = this.formatDate(startDate);this.endDate = this.formatDate(currentDate);console.log(this.startDate,'2023-07-29')console.log(this.startDate,'2023-08-04')},formatDate(date) {var year = date.getFullYear();var month = ("0" + (date.getMonth() + 1)).slice(-2);var day = ("0" + date.getDate()).slice(-2);return year + "-" + month + "-" + day;}
}

Vue的data选项中定义了startDate和endDate两个变量来保存起始日和结束日。在Vue的mounted钩子中调用calculateDateRange方法来计算日期范围。
calculateDateRange方法首先获取当前日期,然后通过减去6天得到起始日的日期。接下来,使用formatDate方法将日期格式化为"YYYY-MM-DD"的形式,最后将起始日和结束日保存到Vue的startDate和endDate变量中。
formatDate方法用于将Date对象的日期格式化为"YYYY-MM-DD"的形式。它通过获取年份、月份和日期,并使用slice()方法在需要的情况下添加前导零来确保日期格式正确。

vue根据月份获取起始日和结束日

例如:startDate: 2023-01-01   endDate: 2023-01-31

data() {return {selectedMonth: '', // 已选择的月份startDate: null, // 起始日endDate: null // 结束日}
},
watch: {selectedMonth: function(newMonth) {if (newMonth) {this.calculateDateRange(newMonth);}}
},
methods: {calculateDateRange(selectedMonth) {// 将选定的月份转换为Date对象var monthDate = new Date(selectedMonth);var year = monthDate.getFullYear();var month = monthDate.getMonth();// 计算起始日和结束日var startDay = new Date(year, month, 1);var endDay = new Date(year, month + 1, 0);// 格式化日期this.startDate = this.formatDate(startDay);this.endDate = this.formatDate(endDay);console.log(this.startDate,'2023-01-01')console.log(this.startDate,'2023-01-31')},formatDate(date) {var year = date.getFullYear();var month = ("0" + (date.getMonth() + 1)).slice(-2);var day = ("0" + date.getDate()).slice(-2);return year + "-" + month + "-" + day;}
}

在Vue的data选项中定义了selectedMonth、startDate和endDate三个变量,分别表示已选择的月份、起始日和结束日。通过watch选项监听selectedMonth的变化,当有新的月份被选择时,调用calculateDateRange方法。
calculateDateRange方法将选定的月份转换为Date对象,然后使用Date对象的方法计算出起始日和结束日。最后,使用formatDate方法将日期格式化为"YYYY-MM-DD"的形式,并将起始日和结束日保存到Vue的startDate和endDate变量中。
formatDate方法用于将Date对象的日期格式化为"YYYY-MM-DD"的形式,通过获取年份、月份和日期,并使用slice()方法在需要的情况下添加前导零来确保日期格式正确。

vue根据年份获取起始日和结束日

例如:startDate: 2023-01-01 endDate: 2023-12-31

data() {return {selectedYear: '', // 已选择的年份startDate: null, // 起始日endDate: null // 结束日}
},
watch: {selectedYear: function(newYear) {if (newYear) {this.calculateDateRange(newYear);}}
},
methods: {calculateDateRange(selectedYear) {var startDate = new Date(selectedYear, 0, 1); // 选择年份的第一天var endDate = new Date(selectedYear, 11, 31); // 选择年份的最后一天// 格式化日期this.startDate = this.formatDate(startDate);this.endDate = this.formatDate(endDate);console.log(this.startDate,'2023-01-01')console.log(this.startDate,'2023-12-31')},formatDate(date) {var year = date.getFullYear();var month = ("0" + (date.getMonth() + 1)).slice(-2);var day = ("0" + date.getDate()).slice(-2);return year + "-" + month + "-" + day;}
}

在Vue的data选项中定义了selectedYear、startDate和endDate三个变量,分别表示已选择的年份、起始日和结束日。然后通过watch选项监听selectedYear的变化,当有新的年份被选择时,调用calculateDateRange方法。
calculateDateRange方法根据选择的年份创建起始日和结束日的Date对象,并使用formatDate方法将日期格式化为"YYYY-MM-DD"的形式。最后,将格式化后的起始日和结束日保存到Vue的startDate和endDate变量中。
formatDate方法用于将Date对象的日期格式化为"YYYY-MM-DD"的形式,通过获取年份、月份和日期,并使用slice()方法在需要的情况下添加前导零来确保日期格式正确。

相关文章:

vue获取近七天、月份、年份的起始日和结束日

vue获取近七天的起始日和结束日 例如:startDate: 2023-07-29 endDate: 2023-08-04 data() {return {startDate: null,endDate: null} }, mounted() {this.calculateDateRange(); }, methods: {calculateDateRange() {var currentDate new Date();var startDate …...

android AIDL 学习使用

在android studio 2023.2中使用 1、在buidl.gradle增加以下配置,然后同步。不增加这些配置,创建aidl时显示为灰色,不能创建 buildFeatures {compose true// Disable unused AGP featuresbuildConfig falseaidl truerenderScript falseresVal…...

学习笔记|C251|STC32G单片机视频开发教程(冲哥)|第三集:开发环境搭建和程序下载

文章目录 1.STC-ISP软件的下载2.STC32手册下载3.PDF阅读器下载4.学会PDF阅读器查阅手册5.跟着手册搭建C251开发环境Tips:如何同时安装Keil的C51、C251和MDK 6.程序包的下载7.第一个工程的编译和下载 原作者/主讲人:冲哥 原始视频地址 1.STC-ISP软件的下载 STC-ISP …...

【数据可视化】(二)数据探索组件

目录 0.简介 一、数据模式与数据组织 1、数据的定义 2、数据库的定义 3、什么是数据模式? 4、数据模式举例 5、什么是数据纲要? 6、数据组织的层次 二、矢量数据 1、什么是矢量数据?...

Go to Play Maimai DX 2023牛客暑期多校训练营5 G

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;给出一长度为n的仅由1,2,3,4组成的数组和一整数k&#xff0c;求一个最短的区间使得1,2,3,4至少各有一个&#xff0c;且4的数量>k 1<k<n<1e5 思路&#xff1a;用双指针l&#xff0c;r维护合法区间&…...

HTML基础铺垫

&#x1f60a;HTML基础铺垫 &#x1f47b;前言&#x1f4dc;HTML文档结构&#x1f3ad;头部head&#x1f94f;标题title标记&#x1f94f;元信息meta标记 &#x1f3ad;主体body&#x1f94f;body标记&#x1f94f;body标记属性 &#x1f3ad;HTML基本语法&#x1f94f;标记类型…...

【Vue3项目实战】vue3项目基于el-menu封装左侧菜单栏组件

文章目录 概述一、先看效果1.1 静态效果1.2 动态效果 二、核心思路三、全量代码3.1 文件目录结构3.2 /sidebar/index.vue 中3.3 /sidebar/sidebarItem.vue 中3.4 路由表结构 四、代码讲解五、SVG组件六、系列文章友链1、[配置husky、stylelint、commitlint&#xff0c;实现git提…...

MySQL正则表达式检索数据

目录 一、使用正则表达式进行基本字符匹配 1.使用regexp关键字 2.使用正则表达式 . 二、进行OR匹配 1.为搜索两个串之一&#xff0c;使用 | 2.匹配几个字符之一[] 3.匹配范围 4.匹配特殊字符 过滤数据允许使用匹配、比较、通配符操作来寻找数据&#xff0c;但是随…...

vite+ts+vue3 prettier.config.js 不生效问题解决

vitetsvue3 prettier.config.js 不生效问题解决 我在做项目的时候 我发现 我的vscode prettier插件 坏了 我自动格式化代码也开了 就是不给我格式化, 我已经写了prettier.config.js这个配置 也 npm i prettier 下载了就是不生效 后来我发现是因为 这个package.json 里的 “ty…...

Java源码规则引擎:jvs-rules 8月新增功能介绍

JVS-rules是JAVA语言下开发的规则引擎&#xff0c;是jvs企业级数字化解决方案中的重要配置化工具&#xff0c;核心解决业务判断的配置化&#xff0c;常见的使用场景&#xff1a;金融信贷风控判断、商品优惠折扣计算、对员工考核评分等各种变化的规则判断情景。 8月是收获的季节…...

2023年第三届工业自动化、机器人与控制工程国际会议 | IET独立出版 | EI检索

会议简介 Brief Introduction 2023年第三届工业自动化、机器人与控制工程国际会议&#xff08;IARCE 2023&#xff09; 会议时间&#xff1a;2023年10月27 -30日 召开地点&#xff1a;中国成都 大会官网&#xff1a;www.iarce.org 2023年第三届工业自动化、机器人与控制工程国际…...

14.2.2 【Linux】software, hardware RAID

磁盘阵列分为硬件与软件。所谓的硬件磁盘阵列是通过磁盘阵列卡来达成阵列的目的。磁盘阵列卡上面有一块专门的芯片在处理 RAID 的任务&#xff0c;因此在性能方面会比较好。在很多任务 &#xff08;例如 RAID 5 的同位检查码计算&#xff09; 磁盘阵列并不会重复消耗原本系统的…...

(学习笔记-进程管理)进程

进程 我们编写的代码只是一个存储在硬盘的静态文件&#xff0c;通过编译后会生成二进制可执行文件&#xff0c;当我们运行这个可执行文件后&#xff0c;它会被装载到内存中&#xff0c;接着CPU会执行程序中的每一条指令&#xff0c;那么这个运行中的程序就被称为进程。 现在我…...

《Linux从练气到飞升》No.07 Linux第一个小程序-进度条的实现

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…...

【NLP概念源和流】 04-过度到RNN(第 4/20 部分)

接上文 【NLP概念源和流】 03-基于计数的嵌入,GloVe(第 3/20 部分) 一、说明 词嵌入使许多NLP任务有了显著的改进。它对单词原理图的理解以及将不同长度的文本表示为固定向量的能力使其在许多复杂的NLP任务中非常受欢迎。大多数机器学习算法可以直接应用于分类和回归任务的…...

企业上云实施路线图

企业上云步骤主要分为规划、设计、实施、验证、运维五个阶段。https://articles.e-works.net.cn/cloud/article144684.htm...

docker系列--解决hyper-v导致docker无法启动问题

一、问题 windows docker desktop 启动报错异常&#xff0c;导致docker无法启动成功 我们看到问题出在hyper-v的问题上&#xff0c;搜索解决方法&#xff0c;官网常见问题如下 Overview | Docker Documentation 二、解决 Hyper-V 已安装并正常工作 在BIOS中启用虚拟化 Wind…...

socket server服务器开发常见的并发模型

两种高效的事件处理模式 服务器程序通常需要处理三类事件&#xff1a;I/O 事件、信号及定时事件。有两种高效的事件处理模式&#xff1a;Reactor和 Proactor&#xff0c;同步 I/O 模型通常用于实现Reactor 模式&#xff0c;异步 I/O 模型通常用于实现 Proactor 模式。 无论是 …...

怎么修改pdf文件中的文字?分享几种编辑方法

怎么修改pdf文件中的文字&#xff1f;PDF格式的文件通常具有很高的可读性和稳定性&#xff0c;但是如果需要修改其中的文字&#xff0c;就需要使用专门的PDF编辑器。本文将介绍几种PDF编辑的方法&#xff0c;下面就跟着我一起来看看这几款工具吧。 方法一&#xff1a;使用迅捷P…...

spring — Spring Security 5.7与6.0差异性对比

1. spring security Spring Security 是一个提供身份验证、授权和针对常见攻击保护的框架。 凭借对保护命令式和反应式应用程序的一流支持&#xff0c;它成为基于Spring的标准安全框架。 Spring Security 在最近几个版本中配置的写法都有一些变化&#xff0c;很多常见的方法都…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

CMS内容管理系统的设计与实现:多站点模式的实现

在一套内容管理系统中&#xff0c;其实有很多站点&#xff0c;比如企业门户网站&#xff0c;产品手册&#xff0c;知识帮助手册等&#xff0c;因此会需要多个站点&#xff0c;甚至PC、mobile、ipad各有一个站点。 每个站点关联的有站点所在目录及所属的域名。 一、站点表设计…...

RKNN开发环境搭建2-RKNN Model Zoo 环境搭建

目录 1.简介2.环境搭建2.1 启动 docker 环境2.2 安装依赖工具2.3 下载 RKNN Model Zoo2.4 RKNN模型转化2.5编译C++1.简介 RKNN Model Zoo基于 RKNPU SDK 工具链开发, 提供了目前主流算法的部署例程. 例程包含导出RKNN模型, 使用 Python API, CAPI 推理 RKNN 模型的流程.   本…...