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笔试面试备考平台_牛客网 题目大意:给出一长度为n的仅由1,2,3,4组成的数组和一整数k,求一个最短的区间使得1,2,3,4至少各有一个,且4的数量>k 1<k<n<1e5 思路:用双指针l,r维护合法区间&…...
HTML基础铺垫
😊HTML基础铺垫 👻前言📜HTML文档结构🎭头部head🥏标题title标记🥏元信息meta标记 🎭主体body🥏body标记🥏body标记属性 🎭HTML基本语法🥏标记类型…...
【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,实现git提…...
MySQL正则表达式检索数据
目录 一、使用正则表达式进行基本字符匹配 1.使用regexp关键字 2.使用正则表达式 . 二、进行OR匹配 1.为搜索两个串之一,使用 | 2.匹配几个字符之一[] 3.匹配范围 4.匹配特殊字符 过滤数据允许使用匹配、比较、通配符操作来寻找数据,但是随…...
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语言下开发的规则引擎,是jvs企业级数字化解决方案中的重要配置化工具,核心解决业务判断的配置化,常见的使用场景:金融信贷风控判断、商品优惠折扣计算、对员工考核评分等各种变化的规则判断情景。 8月是收获的季节…...
2023年第三届工业自动化、机器人与控制工程国际会议 | IET独立出版 | EI检索
会议简介 Brief Introduction 2023年第三届工业自动化、机器人与控制工程国际会议(IARCE 2023) 会议时间:2023年10月27 -30日 召开地点:中国成都 大会官网:www.iarce.org 2023年第三届工业自动化、机器人与控制工程国际…...
14.2.2 【Linux】software, hardware RAID
磁盘阵列分为硬件与软件。所谓的硬件磁盘阵列是通过磁盘阵列卡来达成阵列的目的。磁盘阵列卡上面有一块专门的芯片在处理 RAID 的任务,因此在性能方面会比较好。在很多任务 (例如 RAID 5 的同位检查码计算) 磁盘阵列并不会重复消耗原本系统的…...
(学习笔记-进程管理)进程
进程 我们编写的代码只是一个存储在硬盘的静态文件,通过编译后会生成二进制可执行文件,当我们运行这个可执行文件后,它会被装载到内存中,接着CPU会执行程序中的每一条指令,那么这个运行中的程序就被称为进程。 现在我…...
《Linux从练气到飞升》No.07 Linux第一个小程序-进度条的实现
🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的…...
【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 启动报错异常,导致docker无法启动成功 我们看到问题出在hyper-v的问题上,搜索解决方法,官网常见问题如下 Overview | Docker Documentation 二、解决 Hyper-V 已安装并正常工作 在BIOS中启用虚拟化 Wind…...
socket server服务器开发常见的并发模型
两种高效的事件处理模式 服务器程序通常需要处理三类事件:I/O 事件、信号及定时事件。有两种高效的事件处理模式:Reactor和 Proactor,同步 I/O 模型通常用于实现Reactor 模式,异步 I/O 模型通常用于实现 Proactor 模式。 无论是 …...
怎么修改pdf文件中的文字?分享几种编辑方法
怎么修改pdf文件中的文字?PDF格式的文件通常具有很高的可读性和稳定性,但是如果需要修改其中的文字,就需要使用专门的PDF编辑器。本文将介绍几种PDF编辑的方法,下面就跟着我一起来看看这几款工具吧。 方法一:使用迅捷P…...
spring — Spring Security 5.7与6.0差异性对比
1. spring security Spring Security 是一个提供身份验证、授权和针对常见攻击保护的框架。 凭借对保护命令式和反应式应用程序的一流支持,它成为基于Spring的标准安全框架。 Spring Security 在最近几个版本中配置的写法都有一些变化,很多常见的方法都…...
Qwen3-TTS语音克隆3秒上手:10种语言一键合成,新手5分钟快速部署
Qwen3-TTS语音克隆3秒上手:10种语言一键合成,新手5分钟快速部署 1. 引言 想象一下,你手头有一段3秒钟的录音,可能是你自己的声音,也可能是某个特定角色的声音。现在,你想让AI用这个声音,说出任…...
终极Tree of Thoughts实战指南:10个复杂问题解决案例详解
终极Tree of Thoughts实战指南:10个复杂问题解决案例详解 【免费下载链接】tree-of-thoughts Plug in and Play Implementation of Tree of Thoughts: Deliberate Problem Solving with Large Language Models that Elevates Model Reasoning by atleast 70% 项目…...
DuckDB 1.4.3 LTS:轻量级分析型数据库的新选择
DuckDB 1.4.3 LTS:轻量级分析型数据库的新选择 在数据管理与分析的领域中,开源软件始终扮演着至关重要的角色,为开发者、数据分析师等提供了丰富多样的工具。DuckDB 1.4.3 LTS 作为一款开源软件,正逐渐在特定场景下崭露头角&#…...
RWKV7-1.5B-g1a开发者手册:curl API调用示例+日志排查+health接口验证
RWKV7-1.5B-g1a开发者手册:curl API调用示例日志排查health接口验证 1. 平台简介 rwkv7-1.5B-g1a 是基于 RWKV-7 架构的多语言文本生成模型,特别适合以下场景: 基础问答文案续写简短总结轻量中文对话 这个模型在单卡24GB显存的GPU上就能轻…...
GD32F45ZG引脚模式实战指南:从基础配置到高级应用
1. GD32F45ZG引脚模式基础入门 第一次接触GD32F45ZG的引脚配置时,我也被各种模式搞得晕头转向。这就像刚拿到新手机时,得先搞清楚各个按键的功能才能玩转它。GD32F45ZG的引脚就是它的"按键",配置对了才能让芯片按我们的想法工作。 …...
VS2013创建首个C++程序教程
在 Visual Studio 2013 中创建并运行第一个 C 程序,主要涉及环境准备、项目创建、代码编写、编译与调试等核心步骤。以下将结合具体操作和代码示例进行详细说明。 1. 环境准备与项目创建 启动 VS2013:确保 Visual Studio 2013 已正确安装。启动后&…...
云厂商集体涨价实录:AWS/阿里云/腾讯云2026年Q1成本变化全解析与应对方案
前言2026年4月,亚马逊股东信正式披露:AWS AI服务年化收入突破150亿美元,自研芯片业务年化收入超200亿美元。与此同时,腾讯云宣布年内第二次调价,这已经是今年Q1以来全球主要云厂商的第N次集体涨价动作了。本文整理了各…...
Cocos Creator平台适配层框架设计
在 Cocos Creator 多平台开发中,平台抽象层不仅是架构设计问题,更是工程落地能力的体现。如果仅停留在概念层面,很容易流于形式。因此,本文在系统总结的基础上,结合实际代码示例,说明如何构建一个可落地的多…...
【生产环境亲测】HANA2.0高可用切换实战指南
SLES 15 SP3 + HANA 2.0 SPS06 生产级 HA 手工切换全流程 | 维护模式规范 | 零数据丢失 | Pacemaker 集群运维 文章标签 SAP HANA SLES 15 SP3 高可用切换 Pacemaker SAP Basis 运维实战 数据库维护 一、前言 在 SLES 15 SP3 + SAP HANA 2.0 SPS06 + Pacemaker/Corosync 高可…...
终极卡牌批量生成工具:让桌游设计效率提升300%的完整指南
终极卡牌批量生成工具:让桌游设计效率提升300%的完整指南 【免费下载链接】CardEditor 一款专为桌游设计师开发的批处理数值填入卡牌生成器/A card batch generator specially developed for board game designers 项目地址: https://gitcode.com/gh_mirrors/ca/C…...
