对当前日期进行按年、按月、按日的取值

 对当前日期进行按年、按月、按日的取值。

其规则为:

按年 为当前日期到来年同一日期的前一天(2024-12-01到2025-11-30)。

按月 为当前日期到下个月的同一日期的前一天 (2024-12-01 到 2024-12-31)。

按日  为当前日期到下一日(2024-12-01 到 2024-12-02)

实验多种方式 ,要么引入组件 要么拆分重组 很麻烦,最后试了个方法觉得挺简便的, 记录下来。

组件用的是vue3的 DatePicker 日期选择器 

      <div style="display: flex; width: 100%; justify-content: space-between"><el-date-pickerv-model="form.StartTime" format="YYYY-MM-DD"value-format="YYYY-MM-DD"type="date"placeholder="开始日期"@change="changeEnterprise"/><div>—</div><el-date-pickerv-model="form.EndTime"format="YYYY-MM-DD"value-format="YYYY-MM-DD"type="date"placeholder="结束日期"disabled/></div>

组件改写选择开始时间,结束时间自动计算。 

   <el-select v-model="form.report" placeholder="请选择时间类型" @change="changeType"><el-option v-for="dict in bus_report_type" :key="dict.value" :label="dict.label" :value="dict.value" />
// 此段代码是字典表取值 转译成假数据<el-option key="0" label="按年" value="0"><el-option key="1" label="按月" value="1"><el-option key="2" label="按日" value="2"></el-select>

 选完时间类型后,显示结束时间。

//根据类型查周期
const changeEnterprise = () => {if (form.value.Type) {const dataTime = new Date(form.value.StartTime);if (form.value.Type == 0) {// 增加一年dataTime.setFullYear(dataTime.getFullYear() + 1);// 减去一天dataTime.setDate(dataTime.getDate() - 1);}if (form.value.Type == 1) {// 增加一个月dataTime.setMonth(dataTime.getMonth() + 1);// 减去一天dataTime.setDate(dataTime.getDate() - 1);}if (form.value.Type == 2) {// 增加一天dataTime.setDate(dataTime.getDate() + 1);}// 格式化日期为 YYYY-MM-DD 字符串const year = dataTime.getFullYear();const month = String(dataTime.getMonth() + 1).padStart(2, '0'); // 月份从0开始,所以需要+1,并且补零const day = String(dataTime.getDate()).padStart(2, '0'); // 日期可能也需要补零form.value.EndTime = `${year}-${month}-${day}`;console.log('startDate', dataTime, form.value.EndTime);} else {form.value.Type = null;}
};

附加一个设置 dateTime 的默认值为当前月的第一天到最后一天 

// 获取当前日期
const currentDate = new Date();// 获取当前月的第一天
const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth());// 获取当前月的最后一天
const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);// 将日期格式化为 YYYY-MM-DD
const formatDate = (date) => {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0');const day = String(date.getDate()).padStart(2, '0');return `${year}-${month}-${day}`;
};// 设置 dateTime 的默认值为当前月的第一天到最后一天
const dateTime = ref([formatDate(firstDay), formatDate(lastDay)]);

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

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

相关文章

.NET体系架构

引言 .NET是由微软开发的一个广泛应用的开发平台&#xff0c;旨在帮助开发者构建各种类型的应用程序&#xff0c;包括桌面应用、Web应用、移动应用和云服务。最初&#xff0c;.NET平台的构建主要集中在Windows环境上&#xff0c;但随着.NET Core和随后.NET 5及以上版本的推出&…

HTML5 加载动画(Loading Animation)

加载动画&#xff08;Loading Animation&#xff09;详解 概述 加载动画是指在数据加载过程中&#xff0c;向用户展示的一种视觉效果&#xff0c;旨在提升用户体验&#xff0c;告知用户系统正在处理请求。它可以减少用户的等待焦虑感&#xff0c;提高界面的互动性。 常见的加…

【Apache Paimon】-- 13 -- 利用 paimon-flink-action 同步 mysql 表数据

利用 Paimon Schema Evolution 核心特性同步变更的 mysql 表结构和数据 1、背景信息 在Paimon 诞生以前,若 mysql/pg 等数据源的表结构发生变化时,我们有几种处理方式 (1)人工通知(比如常规的使用邮件),然后运维人员手动同步到数据仓库中 (2)使用 flink 消费 DDL bi…

【网络协议】静态路由详解

网络中的路由器通过以下两种方式之一发现远程网络&#xff1a; 静态配置路由动态路由协议 在本文&#xff0c;我们将学习关于静态路由的各种概念&#xff0c;例如如何配置静态路由、路由表如何进行决策、路由接口等相关知识。 文章目录 引言直连网络静态路由路由表原则原则1原…

华为C语言编程规范总结

1.头文件更改会导致所有直接或间接包含该头文件的的C文件重新编译&#xff0c;会增加大量编译工作量&#xff0c;延长编译时间&#xff0c;因此&#xff1a; 1.1 头文件里尽量少包含头文件 1.2 头文件应向稳定的方向包含 2.每一个.c文件应有一个同名.h文件&#xff0c…

python 生成24bit音频数据实例解析

一 概念 24 bit 是指音频文件的 采样深度 &#xff08;bit depth&#xff09;。 它代表了每个采样点的数据精度&#xff0c;也就是音频每个样本所使用的比特数。 24 bit 的采样深度相较于 16 bit 提供了更高的动态范围和更精确的音频信息表示。 动态范围&#xff1a;24 bit 的…

PyTorch:.max(1)和.max(0)的使用

目录 1&#xff09;.max(1)的使用&#xff1a; 2&#xff09;.max(0)的使用&#xff1a; 1&#xff09;.max(1)的使用&#xff1a; 假设有一个形状为 ( m , n ) 的 Tensor x &#xff0c;其中m表示行数&#xff0c;n表示列数。 x.max(1) &#xff0c;相当于x.max(dim1) 。作…

Vue 3 Diff 算法过程及基本实现方式

Vue 3 的 Diff 算法 Vue 3 使用的是一种高效的 DOM Diff 算法&#xff0c;主要用于在虚拟 DOM 树发生变化时&#xff0c;计算最小的操作以更新真实 DOM。相比 Vue 2&#xff0c;Vue 3 的 Diff 算法做了很多优化。 Diff 算法的背景与目的 虚拟 DOM 树的对比&#xff1a;在 Vue…

任务调度系统Quartz.net详解2-Scheduler、Calendar及Listener

任务调度系统Quartz.net详解2-Scheduler、Calendar及Listener Scheduler 调度器scheduler是Quartz中的独立工作容器&#xff0c;所有的Trigger和Job都需要注册到scheduler中才能工作。我们可以通过SchedulerFactory来获取scheduler实例。如下&#xff1a; //1.获取默认的标准…

解锁 C# 与 LiteDB 嵌入式 NoSQL 数据库

一、开篇&#xff1a;邂逅 C# 与 LiteDB 新世界 在当今的软件开发领域&#xff0c;数据管理如同建筑的基石&#xff0c;而选择一款合适的数据库则是项目成功与否的关键因素之一。对于 C# 开发者来说&#xff0c;面对琳琅满目的数据库选项&#xff0c;如何抉择常常令人头疼。今…

Dependency check 通过Maven构建时,配置Mysql数据库遇到的三个坑

使用过Dependency check的同学&#xff0c;一定会遇到这个问题—— 每次执行依赖扫描时&#xff0c;由于网络问题会导致NVD下载种子数据的过程中的种种失败&#xff0c;不仅浪费了大量时间&#xff0c;还会因为下载文件的不完整性直接导致依赖检测的失败。所以我在使用Dependen…

Ubuntu中批量重命名,rename

你可以使用下面的命令批量重命名这些文件&#xff0c;在文件名中插入 _1&#xff1a; 方式一 使用 mv 命令批量重命名 如果你已经在终端中&#xff0c;且当前目录包含这些文件&#xff0c;可以执行以下命令&#xff1a; mv ai.c ai_1.c mv ai.h ai_1.h mv ao.c ao_1.c mv a…

JVM 优化指南

JVM 优化指南 1. JVM 参数配置 1.1 基础参数配置 设置堆内存大小 -Xms2048m -Xmx2048m 设置新生代大小 -Xmn1024m 设置元空间大小 -XX:MetaspaceSize256m -XX:MaxMetaspaceSize256m 设置线程栈大小 -Xss512k1.2 垃圾回收器配置 使用 G1 垃圾回收器 -XX:UseG1GC 设置期望停顿…

【面试题】技术场景 5、日志采集ELK

日志采集的重要性与采集方式 重要性&#xff1a;在项目开发、测试及生产环境中&#xff0c;日志是定位系统问题的关键手段&#xff0c;对系统维护与问题排查至关重要。采集方式 常规采集&#xff1a;按天保存日志文件至专门目录&#xff0c;文件名包含项目名、端口及日期&…

【数据库】三、SQL语言

文章目录 三、SQL语言1 概述2 数据定义(DDL)2.1 定义数据库2.2 定义基本表2.3 修改基本表2.4 删除基本表 3 数据操作(DML)3.1 数据查询3.1.1 单表查询3.1.2 连接查询3.1.3 嵌套查询3.1.4 集合查询 3.2 数据更新3.2.1 插入数据3.2.2 修改数据3.2.3 删除数据 4 数据控制(DCL)5 视…

C++ 的 pair 和 tuple

1 std::pair 1.1 C 98 的 std::pair 1.1.1 std::pair 的构造 ​ C 的二元组 std::pair<> 在 C 98 标准中就存在了&#xff0c;其定义如下&#xff1a; template<class T1, class T2> struct pair;std::pair<> 是个类模板&#xff0c;它有两个成员&#x…

Ubuntu | PostgreSQL | 解决 ERROR: `xmllint` is missing on your system.

解决 sudo apt install apt-file sudo apt-file updatesudo apt-file search xmllint sudo apt install libxml2-utils执行 # postgres源码安装包解压文件夹中 make install make install问题 make -C src install make[2]: Entering directory /home/postgres/postgresql-1…

springboot 加载本地jar到maven

在Spring Boot项目中&#xff0c;如果你想要加载一个本地的jar文件到Maven本地仓库&#xff0c;你可以使用Maven的install-file目标来实现。以下是一个简单的例子&#xff1a; 打开命令行工具&#xff08;例如&#xff1a;终端或者命令提示符&#xff09;。 执行以下Maven命令…

HTML5 Audio(音频)

HTML5 Audio(音频) HTML5 的 <audio> 元素是一个重要的革新,它为网页开发者提供了一种简单的方式来嵌入音频内容。在这篇文章中,我们将探讨 HTML5 <audio> 元素的特性、用法、浏览器兼容性,以及如何通过 JavaScript 和 CSS 对其进行控制和定制。 1. HTML5 <…