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

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.dtcms.com/a/213806.html

相关文章:

  • PostgreSQL日志管理完整方案(AI)
  • 关于Python编程语言学习的入门总结
  • SQL:合并查询(UNION)
  • .gitignore 的基本用法
  • vSphere 7.0 client 提示HTTP状态 500- 内部服务器错误
  • day021-定时任务
  • 创业团队建设与管理(一)
  • 扣子平台上如何进行对象序列化,JSON序列化和反序列化节点的使用
  • MPI实现中对消息传递的优化
  • 通用的管理账号设置设计(一)
  • 学习python day8
  • leetcode 93. Restore IP Addresses
  • mac for vscode集成的源代码管理 撤销和删除文件报错Permission denied
  • 宫格导航--纯血鸿蒙组件库AUI
  • 【C++篇】list模拟实现
  • SBT开源构建工具
  • 基于python+Django+Mysql的校园二手交易市场
  • 深入Java TCP流套接字编程:高效服务器构建与高并发实战优化指南​
  • Python实例题:Python应用马尔可夫链算法实现随机文本生成
  • sass,less是什么?为什么要使用他们?
  • 学员投稿:华为,ov等手机主流大厂桌面未读计数角标更新接口汇总
  • 项目三 - 任务8:实现词频统计功能
  • [论文阅读]Prompt Injection attack against LLM-integrated Applications
  • Linux 网络配置现代实践:Netplan 与 ifcfg 的全景对比与工程指南20250526
  • 炫云云渲染,构筑虚实交融的3D数字新视界
  • python(linux环境)-pickle、json、time、zipfile模块的使用
  • 【C++11】lambda表达式 || 函数包装器 || bind用法
  • Cesium 实战 26 - 自定义纹理材质 - 实际应用之飞线(抛物线)
  • HTML与Flask表单之间的关系(chatgtp提供)
  • 【每日渲美学】3ds Max橱柜材质教程:厨房高光烤漆、木纹、亚克力、亚光板材渲染优化指南