针对于vue element-plus组件的el-date-picker日期区间组件的日期格式问题以及如何进行区间判断

复制代码
<template>
 <el-date-picker v-model="value1" type="daterange" range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期" :size="size" @change="sarend" />
</template>

<script setup>
const tableData = ref([])
const formattedDates = ref([])
const value1 = ref('')
</script>

const sarend = () => {
  // 对每个输入日期进行处理
  value1.value.forEach((date) => {
    let inputDate = new Date(date); // 将输入的字符串日期转换为 Date 对象
    let year = inputDate.getFullYear(); // 获取年份
    let month = inputDate.getMonth() + 1; // 获取月份(月份范围是 0 到 11,因此需要加 1)
    let day = inputDate.getDate(); // 获取日期
    let formattedDate =
      year +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (day < 10 ? '0' + day : day); // 格式化日期为 'YYYY-MM-DD' 形式
    formattedDates.value.push(formattedDate); // 将格式化后的日期保存起来
  });

  let startTimestamp = new Date(formattedDates.value[0]).getTime(); // 获取开始日期的时间戳
  let endTimestamp = new Date(formattedDates.value[1]).getTime(); // 获取结束日期的时间戳

  let result = tableData.value.filter((item) => {
    let itemTimestamp = new Date(item.create_time).getTime(); // 获取数据项的时间戳
    return itemTimestamp >= startTimestamp && itemTimestamp <= endTimestamp; // 返回在日期范围内的数据项
  });

  tableData.value = result; // 更新表格数据
};
相关推荐
Freedom风间4 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军4 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军4 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪5 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer5 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu5 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风5 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发5 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中5 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron