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()方法在需要的情况下添加前导零来确保日期格式正确。

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

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

相关文章

将Visio和Excel导出成没有白边的PDF文件

1、VISIO如何无白边导出pdf格式 在使用Latex时,要导入矢量图eps格式。但是VISIO无法输出eps格式,这就需要将其导出为pdf。但是导出pdf时,往往会有大量的白边。VISIO无白边导出pdf格式的方法如下: 1.文件——开发工具——显示sha…

vue中使用Base64加密、解密以及des加密、解密

Base64加密、解密 第一步: npm install js-base64 --save 下载依赖 第二步: 直接引入即可 import { Base64 } from js-base64; 第三步: Base64.encode(xxxx) 其中 .encode() 加密 .decode() 解密 中间不需要使用加密的key等…

OpenLayers入门,OpenLayers解析通过fetch请求的GeoJson格式数据,并叠加要素文字标注,以行政区划边界为例

专栏目录: OpenLayers入门教程汇总目录 前言 本章讲解如何使用OpenLayers通过fetch请求geojson数据,然后通过OpenLayers解析为Feature要素叠加到图层上,并且通过动态设置标注方式显示要素属性为文字标注。 本章还是以行政区划边界为例,这个示例在开发中比较常用,建议收藏…

利用OpenCV实现图像拼接

一、介绍 图像拼接. 二、分步实现 要实现图像拼接,简单来说有以下几步: 对每幅图进行特征点提取对对特征点进行匹配进行图像配准把图像拷贝到另一幅图像的特定位置对重叠边界进行特殊处理 PS:需要使用低版本的opencv,否则无法使…

解密顶象滑动拼图验证码:原理与识别方法详解

在网络世界中,验证码是一种常见的安全措施,用于识别用户是否真实、抵御恶意爬虫攻击。顶象滑动拼图验证码是一种常见而又具有挑战性的验证码形式。本文将详细介绍顶象滑动拼图验证码的原理,并提供一些常见的识别方法,帮助您更好地…

老版MFC工程迁移到VC2019编译EXE太大的问题

有个老版静态链接MFC库的MFC程序需要迁移到VC2019编译,直接用VC2019打开就会自动迁移过去,然后编译一下,生成的EXE大小将近3MB,老版的工程编译出来也就600多KB。 肯定哪里不对劲! 好一顿研究之后发现原来默认会把MFC…

【C语言学习】C语言的基础数据类型

一、数据类型 1.整型 short(短整型) int(整型 long(长整型) long long(长整型)没有特殊需要,就用int 2.浮点型 float(单精度型) double(双精度型&#xff…

Django的生命周期流程图(补充)、路由层urls.py文件、无名分组和有名分组、反向解析(无名反向解析、有名反向解析)、路由分发、伪静态

一、orm的增删改查方法(补充) 1. 查询resmodels.表名(类名).objects.all()[0]resmodels.表名(类名).objects.filter(usernameusername, passwordpassword).all()res models.表名(类名).objects.first() # 判断,判断数据是否有# res如果查询…

git清除历史纪录

Git 是一种常用的版本控制工具,被广泛用于项目开发中。在项目开发的过程中,我们通常会使用各种 git 命令来进行版本控制和管理,其中包括提交代码,合并分支等操作。然而,在某些情况下,我们可能需要清除 Git …

SAM在医学图像分割的一些研究(Segment Anything Model for Medical Images?(2023))

使用预训练模型通过两种主要模式进行分割,包括自动一切和手动提示(例如,点和框)。SAM在各种自然图像分割任务上取得了令人印象深刻的效果。然而,由于医学图像的形态复杂、解剖结构精细、物体边界不确定和复杂、物体尺度大,使得医学…

iOS——Block one

块类似于匿名函数或闭包,在许多其他编程语言中也存在类似的概念。 可以访问上下文,运行效率高 Block 以下是块的一些基本知识: 块的定义:块是由一对花括号 {} 包围的代码片段,可以包含一段可执行的代码。块的定义使…

Kotlin~Memento备忘录模式

概念 备忘录模式是一种行为型设计模式,用于捕获和存储对象的内部状态,并在需要时将对象恢复到之前的状态。 备忘录模式允许在不暴露对象内部实现细节的情况下,对对象进行状态的保存和恢复。 角色介绍 Originator:原发器&#x…

NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 论文阅读

论文信息 题目:NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 作者:Antoni Rosinol, John J. Leonard, Luca Carlone 代码:https://github.com/ToniRV/NeRF-SLAM 来源:arxiv 时间&#xff…

【零基础学Rust | 基础系列 | 数据结构】元组,数组,向量,字符串,结构体

文章标题 简介:一,元组:1,定义元组:2,访问元组元素:3,元组解构:4,元组在函数中的应用: 二,数组:1,数组的声明和…

Redis-1

Redis 理论部分 redis 速度快的原因 1、纯内存操作 2、单线程操作,避免了频繁的上下文切换和资源争用问题,多线程需要占用更多的 CPU 资源 3、采用了非阻塞 I/O 多路复用机制 4、提供了非常高效的数据结构,例如双向链表、压缩页表和跳跃…

js怎么判断该值是是否在数组中

1.利用数组的includes()方法 includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。 var fruits [苹果,"香蕉", 榴莲, 橘子, 菠萝蜜,"梨子"]; if(fruits.includes(榴莲)){console.log("该值在数组…

QT以管理员身份运行

以下配置后,QT在QT Creator调试时,或者生成的.exe程序,都将会默认以管理员身份运行。 一、MSVC编译器 1、在Pro文件中添加以下代码: QMAKE_LFLAGS /MANIFESTUAC:\"level\requireAdministrator\ uiAccess\false\\" …

纯css实现登录表单动效

效果图&#xff1a; 代码展示 // 我这边用的是elementUI表单校验&#xff0c;更改的样式。 <el-form:model"form":rules"rules"ref"fromList":hide-required-asterisk"true"><el-form-item prop"account"><…

全网最强,Python接口自动化测试实战-接口参数关联(购物实例)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 什么是参数关联&a…

transformer学习

transformer 李宏毅老师的课&#xff1a;https://www.youtube.com/watch?vugWDIIOHtPA&listPLJV_el3uVTsOK_ZK5L0Iv_EQoL1JefRL4&index60 知乎上的文章&#xff1a;Transformer模型详解&#xff08;图解最完整版&#xff09; 主要参考tensorflow的官方文档&#xf…