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

vue3获取两个日期之间的所有时间

1.获取两个日期之间所有年月日

如图所示:在这里插入图片描述
代码如下:

<template><div class="datePicker"><el-date-pickerv-model="value1"type="daterange"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"@change="datePickerChange"format="YYYY-MM-DD"value-format="YYYY-MM-DD"/></div>
</template><script setup lang="ts">
import { ref} from "vue";
const value1 = ref("");
const betweenData = ref([]);
const datePickerChange = (value) => {betweenData.value = []; // 清空之前的日期列表const start = new Date(value[0]);const end = new Date(value[1]);const currentDate = new Date(start);while (currentDate <= end) {betweenData.value.push(new Date(currentDate).toISOString().split("T")[0]); currentDate.setDate(currentDate.getDate() + 1);}
};
</script>

2.获取两个日期之间所有年月

如图所示:
在这里插入图片描述
代码如下:

<template><div class="datePicker"><el-date-pickerv-model="value1"type="monthrange"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"@change="datePickerChange"format="YYYY-MM"value-format="YYYY-MM"/></div>
</template><script setup lang="ts">
import { ref} from "vue";
const value1 = ref("");
const betweenData = ref([]);
const datePickerChange = (value) => {betweenData.value = []; // 清空之前的日期列表const start = new Date(value[0]);const end = new Date(value[1]);const currentDate = new Date(start);while (currentDate <= end) {betweenData.value.push(currentDate.getFullYear() +"-" + (currentDate.getMonth() + 1).toString().padStart(2, "0")); currentDate.setMonth(currentDate.getMonth() + 1); currentDate.setDate(1);}
};
</script>

3.获取两个日期之间所有年

如图所示:
在这里插入图片描述
代码如下:

<template><div class="datePicker"><el-date-pickerv-model="value1"type="monthrange"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"@change="datePickerChange"format="YYYY-MM"value-format="YYYY-MM"/></div>
</template><script setup lang="ts">
import { ref} from "vue";
const value1 = ref("");
const betweenData = ref([]);
const datePickerChange = (value) => {betweenData.value = []; // 清空之前的日期列表const start = new Date(value[0]);const end = new Date(value[1]);const currentDate = new Date(start);while (currentDate <= end) {betweenData.value.push(currentDate.getFullYear());currentDate.setFullYear(currentDate.getFullYear() + 1);}
};
</script>

Only those who capture the moment are real.

http://www.lryc.cn/news/2387707.html

相关文章:

  • Python 实现简易版的文件管理(结合网络编程)
  • 元组可以比较大小吗?一次返回多个值?编程语言的元组?声明变量一定需要指定类型吗?
  • PXC集群
  • 线程安全问题的成因
  • 零基础远程连接课题组Linux服务器,安装anaconda,配置python环境(换源),在服务器上运行python代码【3/3 适合小白,步骤详细!!!】
  • 字节跳动BAGEL-7B-MoT模型开源:多模态AI技术的新范式与行业涟漪
  • Ubuntu静态IP配置信息查看命令
  • unity实现wasd键控制汽车漫游
  • Python优雅执行SSH命令:10种方法+虚拟环境深度实践
  • Linux TCP与Socket与IO多路复用(Epoll)
  • LINUX安装运行jeelowcode后端项目(命令行)
  • 嵌入式高级工程师面试全解:从 malloc 到 kernel panic 的系统知识梳理
  • 机器学习第二十七讲:Kaggle → 参加机器学习界的奥林匹克
  • C++(初阶)(二十)——封装实现set和map
  • 【MySQL】06.内置函数
  • 企业微信内部网页开发流程笔记
  • 智慧在线判题OJ系统项目总体,包含功能开发思路,内部中间件,已经部分知识点
  • 【MySQL】2-MySQL索引P2-执行计划
  • 云电脑显卡性能终极对决:ToDesk云电脑/顺网云/海马云,谁才是4K游戏之王?
  • 11 接口自动化-框架封装之统一请求封装和接口关联封装
  • influxdb时序数据库
  • OpenCV CUDA模块图像处理------颜色空间处理之用于执行伽马校正(Gamma Correction)函数gammaCorrection()
  • 机器学习10-随机森林
  • 商品条形码查询接口如何用C#进行调用?
  • 编译pg_duckdb步骤
  • 多模态大语言模型arxiv论文略读(九十一)
  • 攻防世界 - MISCall
  • 数据结构测试模拟题(2)
  • 在PyTorch中,对于一个张量,如何快速为多个元素赋值相同的值
  • 苍穹外卖--Redis