当前位置: 首页 > 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;很多常见的方法都…...

Claude参数曝光,AI模型竞争格局再掀波澜

马斯克“手滑”&#xff0c;Claude参数浮出水面 马斯克在分享xAI的Colossus 2超算训练计划时&#xff0c;意外透露了Claude系列模型的参数规模。他表示Grok 4.2参数量为5000亿&#xff0c;是xAI目前在训最大10万亿参数模型的5%&#xff0c;同时指出Grok参数量是Sonnet的一半、O…...

GLM-4V-9B保姆级安装教程:Docker一键部署,支持多轮对话

GLM-4V-9B保姆级安装教程&#xff1a;Docker一键部署&#xff0c;支持多轮对话 1. 环境准备与快速部署 1.1 系统要求 操作系统&#xff1a;Linux (推荐Ubuntu 20.04)显卡&#xff1a;NVIDIA GPU (显存≥24GB)驱动&#xff1a;NVIDIA驱动≥515.65.01Docker&#xff1a;19.03C…...

快速搭建人脸分析系统:Face Analysis WebUI新手部署指南

快速搭建人脸分析系统&#xff1a;Face Analysis WebUI新手部署指南 1. 为什么选择Face Analysis WebUI&#xff1f; 在当今数字化时代&#xff0c;人脸分析技术正广泛应用于各个领域。Face Analysis WebUI基于InsightFace框架&#xff0c;将复杂的人脸分析功能封装成简单易用…...

GD32F45ZG引脚模式实战指南:从基础配置到高级应用

1. GD32F45ZG引脚模式基础入门 第一次接触GD32F45ZG的引脚配置时&#xff0c;我也被各种模式搞得晕头转向。这就像刚拿到新手机时&#xff0c;得先搞清楚各个按键的功能才能玩转它。GD32F45ZG的引脚就是它的"按键"&#xff0c;配置对了才能让芯片按我们的想法工作。 …...

5分钟掌握显微图像拼接:MIST工具如何彻底改变科研图像处理

5分钟掌握显微图像拼接&#xff1a;MIST工具如何彻底改变科研图像处理 【免费下载链接】MIST Microscopy Image Stitching Tool 项目地址: https://gitcode.com/gh_mirrors/mist3/MIST 在生物医学研究和材料科学领域&#xff0c;科研人员常常面临一个共同的挑战&#xf…...

Calico IPIP 使用指南芈

本课概览 Microsoft Agent Framework (MAF) 提供了一套强大的 Workflow&#xff08;工作流&#xff09; 框架&#xff0c;用于编排和协调多个智能体&#xff08;Agent&#xff09;或处理组件的执行流程。 本课将以通俗易懂的方式&#xff0c;帮助你理解 MAF Workflow 的核心概念…...

ARM开发避坑指南:内存溢出导致的HardFault_Handler错误排查全流程

ARM开发避坑指南&#xff1a;内存溢出导致的HardFault_Handler错误排查全流程 在嵌入式开发中&#xff0c;HardFault_Handler就像一位不速之客&#xff0c;总是在最不合时宜的时候突然造访。作为一名长期与ARM架构打交道的工程师&#xff0c;我见过太多因为内存管理不当而导致的…...

MySQL如何防止开发环境数据同步到生产_设置访问控制与网络隔离

开发能删表是因为权限未按库限定或实例混用&#xff0c;如测试库与生产库共用实例、bind-address0.0.0.0暴露端口、localhost连接绕过网络控制、主从配置不当致数据回流等。MySQL用户权限只给SELECT&#xff0c;为什么开发还能删表&#xff1f;权限配置不等于安全隔离。即使GRA…...

用Emoji魔法点亮Python日志:让程序输出告别枯燥,充满情感与个性!

1. 为什么你的Python日志需要Emoji魔法&#xff1f; 你有没有盯着满屏黑白文字日志debug到怀疑人生的经历&#xff1f;上周我维护一个爬虫系统时&#xff0c;凌晨3点还在2000行日志里找那个该死的"ERROR"关键词&#xff0c;那一刻突然意识到——我们的程序输出实在太…...

Midscene.js:用自然语言重新定义跨平台UI自动化测试

Midscene.js&#xff1a;用自然语言重新定义跨平台UI自动化测试 【免费下载链接】midscene AI-powered, vision-driven UI automation for every platform. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene 想象一下&#xff0c;你只需要用自然语言描述&qu…...