针对于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; // 更新表格数据
};

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【网站项目】基于SSM的231论文投稿系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

《合成孔径雷达成像算法与实现》Figure5.19

clc clear close all距离向参数 R_eta_c 20e3; % 景中心斜距 Tr 25e-6; % 发射脉冲时宽 Kr 0.25e12; % 距离向调频率 Fr 7.5e6; % 距离向采样率 Nrg 256; % 距离线采样点数 Bw abs(Kr*Tr); …

【word visio绘图】关闭visio两线交叉的跳线(跨线)

【visio绘图】关闭visio两线交叉的跳线&#xff08;跨线&#xff09; 1 如何在Visio绘图中关闭visio两线交叉的跳线&#xff08;跨线&#xff09;第一步&#xff1a;打开Visio并创建您的图形第二步&#xff1a;绘制您的连接线第三步&#xff1a;关闭跳线第四步&#xff1a;手动…

XSS_Labs靶场通关笔记

每一关的方法不唯一&#xff1b;可以结合源码进行分析后构造payload&#xff1b; 通关技巧&#xff08;四步&#xff09;&#xff1a; 1.输入内容看源码变化&#xff1b; 2.找到内容插入点&#xff1b; 3.测试是否有过滤&#xff1b; 4.构造payload绕过 第一关 构造paylo…

软件设计师——计算机网络(四)

&#x1f4d1;前言 本文主要是【计算机网络】——软件设计师——计算机网络的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1…

【心得】java JNDI配合RMI实现注入个人笔记

目录 JNDI RMI 基本概念 RMI 基本逻辑 恶意利用 JNDI注入RMI实现攻击 JNDI Java Naming and Directory Interface Java 命令和目录接口 让配置参数 和 代码 解耦的规范或者思想 低耦合 高内聚 Name 命名 java对象 通过 命名 绑定到 容器环境 java对象和一个特定的…

二分算法模版

二分算法模版 实数二分算法模版实数二分模版题 整数二分算法模版向上取整二分模版向下取整二分模版二分模版的注意点二分模版中check函数的实现能够使用二分的条件 二分主要分两类&#xff0c; 一类是对实数进行二分&#xff0c;一类是对整数进行二分 对整数二分又分成2种&…

分布式id-Leaf算法

一、介绍 由美团开发&#xff0c;开源项目链接&#xff1a;https://github.com/Meituan-Dianping/Leaf Leaf同时支持号段模式和snowflake算法模式&#xff0c;可以切换使用。ID号码是趋势递增的8byte的64位数字&#xff0c;满足上述数据库存储的主键要求。 Leaf的snowflake模…

谷歌vue插件安装包

链接&#xff1a;https://pan.baidu.com/s/1wTCqn7ttc-rF_wZScfEgPw?pwde7k6 提取码&#xff1a;e7k6 修改D:\谷歌浏览器插件安装包\devtools-main\packages\shell-chrome下manifest.json文件 将里面这四个文件地址改为src下面&#xff0c;因为地址在src下&#xff0c;直接…

Unity中URP下逐顶点光照

文章目录 前言一、之前额外灯逐像素光照的数据准备好后&#xff0c;还有最后的处理二、额外灯的逐顶点光照1、逐顶点额外灯的光照颜色2、inputData.vertexLighting3、surfaceData.albedo 前言 在上篇文章中&#xff0c;我们分析了Unity中URP下额外灯&#xff0c;逐像素光照中聚…

【RTP】webrtc 学习2: webrtc对h264的rtp打包

切片只是拷贝帧的split的各个部分到新的rtp 包的封装中。并没有在rtp包本身标记是否为关键帧FU-A 切片 输入的H.264 数据进行split :SplitNalu SplitNalu : 按照最大1200字节进行切分 切分后会返回一个数组 对于FU-A :split的数据总大小是 去掉一个字节的nalu header size …

高德地图实现-微信小程序地图导航

效果图&#xff1a; 一、准备阶段 1、在高德开放平台注册成为开发者2、申请开发者密钥&#xff08;key&#xff09;。3、下载并解压高德地图微信小程序SDK 高德开放平台&#xff1a; 注册账号(https://lbs.amap.com/)) 申请小程序应用的 key 应用管理(https://console.ama…

数据结构-顺序表详解专题

目录 顺序表 1.简单了解顺序表 2.顺序表的分类 2.1静态顺序表 2.2动态顺序表 2.3typedef命名作用 3.动态顺序表的实现 SeqList.h SeqList.c test.c 顺序表 1.简单了解顺序表 顺序表是线性表的一种&#xff0c;线性表是在逻辑上是线性结构&#xff0c;在物理逻辑上并…

【数据结构】栈、队列、数组、列表

数据结构是什么&#xff1f; 数据结构是计算机存储、组织数据的方式 是指数据相互之间是以什么方式排列在一起的。 数据结构是为了更加方便的管理和使用数据&#xff0c;需要结合具体的业务场景来进行选择。一般情况下&#xff0c;精心选择的数据结构可以带来更高的运行或者…

【CSS】实现鼠标悬停图片放大的几种方法

1.背景图片放大 使用css设置背景图片大小100%&#xff0c;同时设置位置和过渡效果&#xff0c;然后使用&#xff1a;hover设置当鼠标悬停时修改图片大小&#xff0c;实现悬停放大效果。 <!DOCTYPE html> <html lang"en"> <head><meta charset…

LVGL入门

一.GUI简介 GUI&#xff0c;全称为图形用户界面&#xff08;Graphical User Interface&#xff09;&#xff0c;是一种通过图形方式与计算机操作系统进行交互的界面。它通过在屏幕上显示图形元素如窗口、按钮、菜单等来代表计算机程序的功能和操作。 GUI的主要特点包括&#…

phpstudy安装mysql5.7后在my.ini文件中无法修改sql_mode

如标题&#xff0c;windows环境下使用phpstudy安装mysql5.7后需要修改mysql中的sql_mode配置&#xff0c;但是在phpstudy中打开mysql配置文件my.ini后&#xff0c; 通过查找找不到sql_mode或sql-mode&#xff0c; 此时无法在my.ini文件中直接进行修改&#xff0c;可以使用mysq…

系统架构设计师教程(十八)安全架构设计理论与实践

安全架构设计理论与实践 18.1 安全架构概述18.1.1 信息安全面临的威胁18.1.2 安全架构的定义和范围18.1.3 与信息安全相关的国内外标准及组织18.2 安全模型18.2.1 状态机模型18.2.2 Bell-LaPadula模型18.2.3 Biba模型18.2.4 Clark-Wilson模型18.2.5 Chinese Wall模型18.3 系统安…

汇编led驱动的代码编写以及ubuntu下的烧录

文章目录 前言一、实验代码详解二、编译1、arm-linux-gnueabihf-gcc 编译文件2、arm-linux-gnueabihf-ld 链接文件3、arm-linux-gnueabihf-objcopy 格式转换4、arm-linux-gnueabihf-objdump 反汇编5、编写Makefile文件 三、代码烧写1、将 imxdownload 拷贝到工程根目录下2、给予…

【C语言刷题系列】交换两个变量的三种方式

文章目录 1.使用临时变量&#xff08;推荐&#xff09; 2.相加和相减的方式&#xff08;值较大时可能丢失数据&#xff09; 3.按位异或运算 本文所属专栏C语言刷题_倔强的石头106的博客-CSDN博客 两个变量值的交换是编程中最常见的问题之一&#xff0c;以下将介绍三种变量的…