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

背景

  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: {// datetimerangetype: 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.mzph.cn/news/4784.shtml

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

相关文章

JAVA集成国密SM2

JAVA集成国密SM2加解密 一、pom配置二、代码集成2.1、目录结构2.2、源码2.3、测试 三、相关链接 国密算法概述&#xff1a;https://blog.csdn.net/qq_38254635/article/details/131801527 SM2椭圆曲线公钥密码算法 为非对称加密&#xff0c;基于ECC。该算法已公开。由于该算法…

react使用SVGA特效 常用api

下载插件 npm install svgaplayerweb --save react中代码 import React, { useEffect } from react; import SVGA from svgaplayerweb const Svga () > {const bofang () > {var player new SVGA.Player(#demoCanvas);//创建实例var parser new SVGA.Parser(#demo…

centos7安装 mongodb

一、rpm安装 1.1、配置MongoDB Enterprise的yum 源文件 [mongodb-enterprise] nameMongoDB Enterprise Repository baseurlhttps://repo.mongodb.com/yum/redhat/$releasever/mongodb-enterprise/3.4/$basearch/ gpgcheck1 enabled1 gpgkeyhttps://www.mongodb.org/static/pgp…

Pytest使用fixture实现token共享

同学们在做pytest接口自动化时&#xff0c;会遇到一个场景就是不同的测试用例需要有一个登录的前置步骤&#xff0c;登录完成后会获取到token&#xff0c;用于之后的代码中。首先我先演示一个常规的做法。 首先在conftest定义一个login的方法&#xff0c;方法返回token pytes…

【Rust 基础篇】Rust Cargo 自定义构建

导言 在 Rust 中&#xff0c;Cargo 是一个功能强大的构建工具和包管理器&#xff0c;它可以帮助我们管理项目的依赖、构建和发布。Cargo 提供了许多默认的构建行为&#xff0c;但有时我们需要自定义构建过程以满足特定的需求。本篇博客将详细介绍如何在 Rust 中使用 Cargo 自定…

【Maven三】——maven生命周期和插件

系列文章目录 Maven之POM介绍 maven命令上传jar包到nexus 【Maven二】——maven仓库 maven生命周期和插件 系列文章目录前言一、什么是生命周期&why1.三套生命周期2.clean生命周期3.default生命周期4.site生命周期5.命令行与生命周期 二、插件目标三、插件绑定1.内置绑定2…

Matlab使用etopo在线地形数据绘制中国区域DEM地形图

以下是使用MATLAB绘制中国区域DEM地形图的过程和代码示例&#xff1a; 1. 首先&#xff0c;需要从etopo网站下载中国区域的地形数据。进入etopo网站&#xff08;https://www.ngdc.noaa.gov/mgg/global/etopo5.HTML&#xff09;&#xff0c;找到“Download Global Relief Data”…

app爬虫(2)谷歌Nexus6P Frida HOOK 实战

一&#xff0c;环境准备&#xff08;手机有root&#xff09;&#xff1a; PC端&#xff1a;frida16.0.3 pip3 install frida16.0.3PC端&#xff1a;frida-tools12.0.2 pip3 install frida-tools12.0.2手机端&#xff1a;frida-server16.0.2 下载地址&#xff1a;https://gith…

C++ 程序设计:单例+原型(手机原型机和量产机)

1.简介 1.1单例模式 C单例模式被广泛应用于需要全局唯一实例的场景。以下是一些常见的使用场景&#xff1a; 日志记录器 在大多数应用程序中&#xff0c;需要一个全局的日志记录器来记录系统运行时的事件和错误。使用单例模式可以确保只有一个日志记录器实例&#xff0c;并能…

韩老师多目标优化:多目标粒子群算法

一. 内容简介 韩老师多目标优化&#xff1a;多目标粒子群算法 视频: 【2022.2.5韩老师十七课时&#xff08;中&#xff09;多目标优化&#xff1a;多目标粒子群算法】 https://www.bilibili.com/video/BV1eS4y157Xg/?share_sourcecopy_web&vd_source7b377d4a833a67013df5…

libevent:windows环境配置+QT使用

目录 libevent是什么 编译 QT使用 测试代码 libevent是什么 Fast portable non-blocking network programming with Libevent http://www.wangafu.net/~nickm/libevent-book/TOC.html 这篇文档讲的很清楚&#xff0c;尤其是Chapter 1: A tiny introduction to asynchro…

大数据面试基础回答

以下是Hive大数据领域的一些常见问题&#xff1a; 数据倾斜&#xff1a;在Hive中&#xff0c;数据倾斜是一个常见的问题&#xff0c;它会导致查询结果不准确或查询过程异常。为了解决数据倾斜问题&#xff0c;可以尝试以下方法&#xff1a; 使用更高效的数据倾斜处理工具&…

cURL error 1014: SSL verify failed 报错

报错 [ERROR] cURL error 1014: SSL verify failed (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for https://mgobe.tencentcloudapi.com/[247] in /www/wwwroot/*.net/vendor/ [ERROR] #0 /www/wwwroot/tencentgame.net/vendor/tencentcloud/tencentcloud-sdk…

matlab入门

命名规则&#xff1a; clc&#xff1a;清除命令行的所有命令 clear all&#xff1a;清除所有工作区的内容 注释&#xff1a;两个% 空格 %% matlab的数据类型 1、数字 3 3 * 5 3 / 5 3 5 3 - 52、字符与字符串 s a %% 求s的ascill码 abs(s) char(97) num2str(65) str I…

代码随想录第48天|198.打家劫舍, 213.打家劫舍II ,337.打家劫舍III

LeetCode198.打家劫舍 题目链接&#xff1a;198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; class Solution { public:int rob(vector<int>& nums) {if(nums.size() 0) return 0;if(nums.size() 1) return nums[0];vector<int> …

家政小程序开发-H5+小程序

移动互联网的发展&#xff0c;微信小程序逐渐成为商家拓展线上业务的重要手段。家政服务作为日常生活中不可或缺的一部分&#xff0c;也开始尝试通过小程序来提高服务质量和效率。 下面是一篇关于家政小程序开发的H5小程序的文章&#xff0c;希望对您有所帮助。 家政服…

Redis进阶底层原理- 缓冲区

Redis中使用了很多缓冲区&#xff0c;在redis各个环节起到了非常核心的作用。下面来一一介绍一下&#xff1a; 输入输出缓冲区&#xff08;客户端缓冲区&#xff09; Redis中的输入输出缓冲区是为了平衡客户端发送命令和服务端处理命令的速度差异&#xff0c;如果客户端发送指…

一本通1910:【00NOIP普及组】计算器的改良题解

今天是编程集训的第二天&#xff0c;也是我来到CSDN整整1年。感谢所有阅读过我的文章的人&#xff0c;谢谢。 今天的比赛难度略低于昨天&#xff0c;但这道题也卡了我好久。 进入正题 题目&#xff1a; 题目描述&#xff1a; NCL是一家专门从事计算器改良与升级的实验室&a…

手把手带你实现ChatGLM2-6B的P-Tuning微调

参考文献&#xff1a;chatglm2ptuning 注意问题1&#xff1a;AttributeError: ‘Seq2SeqTrainer’ object has no attribute is_deepspeed_enabl torch.distributed.elastic.multiprocessing.errors.ChildFailedError: 可能是版本太高&#xff0c;可以参考chatglm2的环境

mysql笔记

目录 1、root用户密码忘记 2、SQL的分类 2.1、DQL数据查询语言 前言 2.1.1、设置别名 2.1.2、去除重复行 2.1.3、空值参与运算 2.1.4、着重号 2.1.5、显示表结构 2.1.6、算数运算符 2.1.7、比较运算符 2.1.8、逻辑运算符 2.1.9、位运算符 2.1.10、 模糊查询 2.1.…