对Element DatePicker时间组件的封装,时间组件开始时间和结束时间绑定

news2024/11/25 16:56:24

背景

  1. 我们时常有时间范围选择,需要选择一个开始时间和一个结束时间给后端,但我们给后端的是两个字段, 分别是开始时间和结束时间,现在使用element绑定的值是一个数组,我们还要来回处理,很麻烦
  2. 列表也的查询,需要查询这个时间段范围内的数据, 如下,比如用户选择了,2023-7-19 至 2023-8-15,后端期望的是我们传递的开始时间是 2023-7-19 00:00:00, 结束时间:23-8-15 23:59:59,因为这样才符合这个范围的选择,8月15本就是应该包含的

在这里插入图片描述

实现

组件名: DateRangePicker

使用方法

vue3

 <DateRangePicker 
    v-model:startTime="dataForm.startTime" 
    v-model:endTime="dataForm.endTime"
   ></DateRangePicker>

vue2

 <DateRangePicker 
    :startTime.sync="dataForm.startTime" 
    :endTime.sync="dataForm.endTime"
   ></DateRangePicker>

使用双向数据绑定 startTime 绑定开始时间,endTime 绑定结束时间

代码如下

<!-- --------------------------------------
 * 日期范围选择器、让element-ui绑定的数组分别对应对到 startTime,endTime 上
 @example
  <DateRangePicker 
	  v-model:startTime="dataForm.startTime" 
	  v-model:endTime="dataForm.endTime"
	  ></DateRangePicker>
-------------------------------------- --->
<template>
  <el-date-picker
    :shortcuts="rangeShortcuts"
    v-bind="$attrs"
    v-model="date"
    :value-format="valueFormat"
    :type="type"
    @change="change"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    class="DateRangePicker"
    :range-separator="rangeSeparator"
  >
  </el-date-picker>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: "DateRangePicker",
  emits: ["update:startTime", "update:endTime", "change"],
  props: {
    type: {
      // datetimerange
      type: String,
      default: "daterange",
    },
    startTime: [Number, String, Date],
    endTime: [Number, String, Date],
    valueFormat: {
      type: String,
      default: "YYYY-MM-DD HH:mm:ss",
    },
    startPlaceholder: {
      type: String,
      default: "开始日期",
    },
    endPlaceholder: {
      type: String,
      default: "结束日期",
    },
    rangeSeparator: {
      default: "—",
    },
  },

  data() {
    return {
      rangeShortcuts,
      date: undefined,
    };
  },

  computed: {
    watchDate() {
      return [this.startTime, this.endTime]
    }
  },

  watch: {
    watchDate: "watchDateChangeHandler",
  },

  created() {
    this.watchDateChangeHandler();
  },

  methods: {
    change(val) {
      let startTime = "";
      let endTime = "";
      if (val && Array.isArray(val)) {
        startTime = val[0];
        if (this.type === 'daterange') {
          endTime = dayjs(val[1]).endOf('day').format(this.valueFormat)
        } else {
          endTime = val[1];
        }
        
        console.log(' endTime: ', endTime)
      }

      this.$emit("update:startTime", startTime);
      this.$emit("update:endTime", endTime);
      this.$emit("change", val);
    },

    watchDateChangeHandler() {
      const { startTime, endTime } = this;
      if ((startTime === 0 || startTime) && endTime) {
        this.date = [startTime, endTime];
      } else {
        this.date = undefined;
      }
    },
  },
};
</script>

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

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

相关文章

Linux6.1 Docker 基本管理

文章目录 计算机系统5G云计算第四章 LINUX Docker 基本管理一、Docker 概述1.概述2.Docker与虚拟机的区别3.容器在内核中支持2种重要技术4.Docker核心概念1&#xff09;镜像2&#xff09;容器3&#xff09;仓库 二、安装 Docker三、Docker 镜像操作四、Docker 容器操作 计算机系…

vue注意点:$attrs、$slots!插槽

$attrs 当父组件给子组件传值&#xff0c;子组件并没有接收数据时&#xff0c;此时数据在$attrs中可以拿到&#xff0c;并且如果子组件不需要使用数据&#xff0c;而孙组件需要&#xff0c;则可以直接v-bind"$attrs"传给孙。 <-- 父组件 --> <div><…

怎么解决亚马逊跟卖?为何卖家总是举报不成功?

以前大家都是从跟卖的时代走向现在的品牌化运营之路&#xff0c;但是现在跟卖已经从大家都模仿的对象变成了大部分卖家厌恶的对象&#xff0c;那么怎么解决这个跟卖问题呢&#xff1f;目前最直接的方法就是进入亚马逊后台进行举报&#xff0c;但是大概率是失败的。 一、举报违…

SQL30 统计每种性别的人数

selectsubstring_index(profile, ,, -1) as gender,count(device_id) as number from user_submit group by gender

苹果平板用不用买原装笔?苹果ipad电容笔推荐

目前&#xff0c;作为iPad平板电脑的一个重要附件&#xff0c;电容笔的功能日益完善&#xff0c;越来越多的人们开始用上了iPad电容笔。所以&#xff0c;选择一款质量好&#xff0c;价格便宜的电容笔就成了人们最为关注的问题。所以&#xff0c;到底哪个牌子的电容笔会比较便宜…

使用 Apache SeaTunnel 实现 Kafka Source 解析复杂Json 案例

版本说明&#xff1a; SeaTunnel&#xff1a;apache-seatunnel-2.3.2-SNAPHOT 引擎说明&#xff1a; Flink&#xff1a;1.16.2 Zeta&#xff1a;官方自带 前言 近些时间&#xff0c;我们正好接手一个数据集成项目&#xff0c;数据上游方是给我们投递到Kafka&#xff0c;我们一…

Docker容器化部署Rancher2.x实战

关闭swap分区 swapoff -avi /etc/fstab 注释掉 /dev/mapper/centos-swap swap swap default 0 0 关闭防火墙 systemctl stop firewalld systemctl disable firewalld 设置主机名称 hostnamectl set-hostname k8s-master hostnamectl set-hostname k8s-node01 加入dns解析…

Tomcat总结

文章目录 1. Tomca简介2. Maven Web 项目结构3. HTTP数据传输格式4. IDEA集成本地Tomcat5. Maven配置Tomcat 1. Tomca简介 简介:   Web服务器的作用&#xff1a; 分析: Tomcat: 1. Tomcat是一个Web服务器, 可以负责解析和处理服务器和浏览器之间传输的HTTP协议 2. Tomcat默…

jupyter定制数学函数

from math import * #导入绘图模块 import numpy as np #导入数值计算模块 import matplotlib.pyplot as plt #导入绘图模块 plt.rcParams[font.sans-serif][SimHei] #绘图中文 plt.rcParams[axes.unicode_minus]False #绘图负号 import mpl_toolkits.axisartist as axisartist…

wampserver的mysql8.0版本在my.ini文件中加入skip_grant_tables无效等一系列问题。

背景&#xff1a;安装了新的wampserver之后&#xff0c;php版本mysql8.0.31&#xff0c;想打开phpadmin可视化管理页面&#xff0c;后来忘记密码了&#xff0c;报错&#xff1a;ERROR 1045 (28000): Access denied for user rootlocalhost (using password: No)&#xff0c;只能…

Apikit 自学日记:如何测试多个关联的 API

肯定会有人好奇&#xff0c;如果有多个关联的 API 如何做测试呢&#xff1f;很简单&#xff01;在 APIkit 中也有测试多个关联 API 的功能。 1、在流程测试用例详情页中&#xff0c;点击“ 添加测试步骤”&#xff0c;选择“从API文档添加API请求” 2、在对应的项目下选择关联的…

使用bat处理批量下载表情包图片

需求&#xff1a; 一共有98个表情包需要下载到本地电脑&#xff0c;表情包png图片的远程URL地址如下&#xff1a; http://bbs.296o.com/emoj/1.png 至 http://bbs.296o.com/emoj/98.png 如果是手工下载的话&#xff0c;要浪费很多时间&#xff0c;我们直接有windows系统上使…

目标检测算法:YOLOv2-v4简单解读

目标检测算法&#xff1a;YOLOv2-v4简单解读 说明 ​ YOLO系列算法是目标检测领域比较突出的算法之一&#xff0c;网上关于每个版本都有非常多的解读&#xff0c;这里我只是简单梳理一下我自己的观点&#xff0c;主要目的是帮助自己复习和梳理知识。 ​ 本博客属于论文解读系列…

nginx基础3——配置文件详解(实用功能篇)

文章目录 一、平滑升级二、修饰符2.1 无修饰符效果2.2 精准匹配&#xff08;&#xff09;2.3 区分大小写匹配&#xff08;~&#xff09;2.4 不区分大小写匹配&#xff08;~*&#xff09;2.5 匹配优先级 三、访问控制四、用户认证五、配置https六、开启状态界面七、rewrite重写u…

文件加密软件哪个好?文件加密方法介绍

为了避免数据泄露事件的发生&#xff0c;电脑中的重要文件需要采用加密的方法进行保护。那么&#xff0c;文件加密软件哪个好呢&#xff1f;下面我们就一起来了解一下。 EFS加密 除了Windows的家庭版系统外&#xff0c;其他版本的系统均拥有EFS文件加密功能&#xff0c;它可以…

Linux 学习记录53(ARM篇)

Linux 学习记录53(ARM篇) 本文目录 Linux 学习记录53(ARM篇)一、内存读写指令1. 在C语言中读取内存2. 指令码及功能3. 格式4. 使用示例5. 寻址方式(1. 前索引方式(2. 后索引方式(3. 自动索引 6.批量寄存器操作指令(1. 操作码(2. 格式(3. 使用示例(4. 地址增长方式>1 ia后缀&…

【论文学习】Distortion Agnostic Deep Watermarking

一、前言 论文链接&#xff1a;Distortion Agnostic Deep Watermarking 论文主要内容&#xff1a; 该文献提出了一种失真不可知的鲁棒水印模型&#xff0c;以解决现有DNN鲁棒水印方法的局限性。现有的DNN鲁棒水印方法&#xff0c;通常是在训练阶段将各类失真&#xff08;例如…

Databend 开源周报第 102 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 为指定列创建 B…

DataTable数据对比

DataTable数据对比 文章目录 DataTable数据对比前言一、计算DataTable差集结构不同的情况结构相同的情况 二、计算DataTable交集结构不同的情况结构相同的情况 三、计算DataTable的并集合两个DaTable结构相同的情况计算并集 前言 开发中我们经常会出现查询数据库后返回DataTab…

Spring Data JPA使用规则和审计的学习

一、引入依赖 完整的pom文件如下所示: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http…