vue中element-ui日期选择组件el-date-picker 清空所选时间,会将model绑定的值设置为null 问题 及 限制起止日期范围

一、问题

在Vue中使用Element UI的日期选择组件 <el-date-picker>,当你清空所选时间时,组件会将绑定的 v-model 值设置为 null。这是日期选择器的预设行为,它将清空所选日期后将其视为 null。但有时后端不允许日期传空。

 因此,可以考虑使用自定义函数来处理日期选择器的值,然后根据需要进行相应的处理。

方法一:

你可以使用 :value@change 这两个属性来控制日期选择器的行为。下面是一个简单的例子:
<template><el-date-pickerv-model="pickedDate"type="date"placeholder="选择日期":value="pickedDate"@change="handleDateChange"></el-date-picker>
</template><script>
export default {data() {return {pickedDate: null // 你的日期数据};},methods: {handleDateChange(value) {// 当日期改变时的处理函数// 在这里你可以根据需要处理日期的值// 例如,如果不想让清空操作将日期设置为null,可以在这里进行判断if (!value) {// 当清空日期时,不更新pickedDate,保持原值return;}// 如果需要在清空时设置日期为特定值(比如空字符串),可以在此处设置// this.pickedDate = value;// 在其他情况下,将值更新为选择的日期this.pickedDate = value;}}
};
</script>

 在上面的例子中,handleDateChange 方法会接收日期选择器选择的值。你可以在这个方法中根据需求进行逻辑处理。如果选择器的值为空(清空操作),你可以决定保持 pickedDate 不变,或者设置为特定值而不是 null

方法二:

el-date-picker绑定value,当点击x时会将value的值改为null,重新赋值时 会报错,解决方案:

        watch: {value1(val, oldVal) {if (!val) {this.value1 = new Date()}}},

监听value的值并且判断新值,如果新值为null,就证明点击了x号,这时候给value赋一个值就可以解决报错。

二、具体问题

我遇到的问题是,需求需要可以只选择开始日期,也可以只选择截止日期。因此组件是由两个“选择日”组件构成type="date"如下图:

而不是由一个“选择日期范围”组件type="daterange":

因此,需要做:

1.限制起始日期小于截止日期

1)根据用户选中的开始日期,置灰不可选的日期范围;

2)如果用户先选择截止日期,再选择的开始日期,且开始日期大于截止日期,清空截止日期;

2.处理点击日期控件的清除按钮后,传值未null情况

1)用了监听的方法;

3.由于我一个页面中有多个日期选择器el-date-picker,对应不同的v-model字段,所以写了一个公共组件来处理

<el-form-item label="处理日期"  label-width="70px"><el-date-pickerv-model="formSearch.dateBegin"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"style="width: 167px"@change="validateDateRange('dateBegin','dateEnd')"></el-date-picker>至<el-date-pickerv-model="formSearch.dateEnd"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"style="width: 167px"@change="validateDateRange('dateBegin','dateEnd')":picker-options="getPickerOptions('dateBegin')"></el-date-picker></el-form-item>

逻辑:

  methods: {//日期选择限制getPickerOptions(startField) {const startDate = new Date(this.formSearch[startField]);return {disabledDate: (time) => {return time.getTime() < startDate.getTime();},};},//选择日期时触发validateDateRange(startField,endField) {this.pickerOptions[startField] = this.getPickerOptions(startField);const startDate = new Date(this.formSearch[startField]);const endDate = new Date(this.formSearch[endField]);if (endDate < startDate) {// 如果截止日期早于开始日期,更新截止日期为开始日期之后的日期this.formSearch[endField] = '';}this.watchField(startField, endField);},//监听,如果传值是null,改为后端需要的字符串‘’watchField(startField, endField) {this.$watch(() => [this.formSearch[startField], this.formSearch[endField]],([newStart, newEnd], [oldStart, oldEnd]) => {if (newStart === null || newStart === '') {console.log('开始日期为空');this.formSearch[startField] = ''; // 将开始日期设置为空字符串}if (newEnd === null || newEnd === '') {console.log('结束日期为空');this.formSearch[endField] = ''; // 将结束日期设置为空字符串}},{ deep: true });},
}

4.解释一下picker-options:

picker-options 是 Element UI 中某些组件的一个属性,它允许自定义日期选择器、时间选择器、颜色选择器等组件的行为和显示方式。

这个属性可以用来传递一些选项对象,以控制选择器的行为,比如在日期选择器中可以用来限制可选日期范围、禁用某些日期等。

picker-options 通常是一个对象,包含了一系列可以配置的选项。这些选项可以因不同的组件而异,以下是一些常见的选项用法示例:

  • 日期选择器(DatePicker):

    • disabledDate:用于禁用不可选的日期。可以是一个函数,接收当前日期作为参数,根据函数返回值 truefalse 来决定是否禁用该日期。
    • shortcuts:设置快捷选项,例如 "今天"、"昨天"、"最近一周" 等。
  • 时间选择器(TimePicker):

    • selectableRange:限制可选时间范围。可以提供一个数组,表示允许选择的时间范围。
  • 颜色选择器(ColorPicker):

    • predefine:预定义颜色。

5.时间戳

.getTime() 是 JavaScript 中 Date 对象的一个方法,用于获取该日期对象表示的时间戳,以毫秒为单位。这个方法返回一个数值,表示从特定的起始时间(通常是1970年1月1日格林威治时间午夜)到该日期时间的毫秒数。这个数值就是时间戳。

这个时间戳可以用于进行日期时间的比较、计算时间间隔等操作。

const currentDate = new Date(); // 创建一个表示当前时间的 Date 对象
const timestamp = currentDate.getTime(); // 获取当前时间的时间戳
console.log(timestamp); // 输出当前时间的时间戳

比较时间有两种方法,一个是 new Date()成时间对象进行比较,另一个是.getTime()时间戳比较。

1. 使用 Date 对象进行比较:

您可以使用 Date 对象来表示日期和时间,然后直接对这些对象进行比较。例如,您可以使用 new Date() 创建日期对象,然后使用比较运算符(如 <, >, <=, >=)直接比较这些对象。

const date1 = new Date('2022-10-01');
const date2 = new Date('2023-02-05');if (date1 < date2) {console.log('date1 在 date2 之前');
} else if (date1 > date2) {console.log('date1 在 date2 之后');
} else {console.log('date1 和 date2 相等');
}

2. 使用时间戳进行比较:

另一种方法是将日期对象转换为时间戳,然后比较这些时间戳。您可以使用 getTime() 方法获取日期对象的时间戳,并使用比较运算符对时间戳进行比较。

const date1 = new Date('2022-10-01');
const date2 = new Date('2023-02-05');const timestamp1 = date1.getTime();
const timestamp2 = date2.getTime();if (timestamp1 < timestamp2) {console.log('date1 在 date2 之前');
} else if (timestamp1 > timestamp2) {console.log('date1 在 date2 之后');
} else {console.log('date1 和 date2 相等');
}

 

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

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

相关文章

如何使用GaussDB创建外表(FOREIGN TABLE)

目录 一、前言 二、创建外表的特点 二、GaussDB创建外表访问外部数据库表&#xff08;示例&#xff09; 1、创建外表 2、FAQ&#xff1a;CREATE USER MAPPING错误 三、GaussDB创建外表映射数据文件&#xff08;示例&#xff09; 1、创建数据文件 2、创建外表 3、FAQ&a…

SpringBoot+Netty+Websocket实现消息推送

这样一个需求&#xff1a;把设备异常的状态每10秒推送到页面并且以弹窗弹出来&#xff0c;这个时候用Websocket最为合适&#xff0c;今天主要是后端代码展示。 添加依赖 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifact…

SpringBoot Maven 项目打包的艺术--主清单属性缺失与NoClassDefFoundError的优雅解决方案

Maven项目的Jar包打包问题-没有主清单属性&&ClassNotFoundException 与 NoClassDefFoundError 文章目录 Maven项目的Jar包打包问题-没有主清单属性&&ClassNotFoundException 与 NoClassDefFoundError1、问题出现1.1、Jar包运行&#xff1a;没有主清单属性解决方…

快递批量查询高手:自动查询,精准掌控状态实时更新信息

随着电子商务的繁荣和智能化生活的普及&#xff0c;快递服务已经成为了我们生活中不可或缺的一部分。然而&#xff0c;在大量的快递信息中&#xff0c;如何快速、准确地查询和掌握快递的实时状态成为了许多人的痛点。今天&#xff0c;我们将介绍一款名为“快递批量查询高手”的…

智能优化算法应用:基于混合蛙跳算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于混合蛙跳算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于混合蛙跳算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.混合蛙跳算法4.实验参数设定5.算法结果6.…

Mac 文件高速下载工具 JDownloader2 下载安装详细教程

朋友们大家好&#xff0c;今天推荐一款多线程下载神器 JDownloader&#xff0c;JDownloader 支持多线程下载、断点续传、网盘资源下载、压缩包文件自解压、OCR识别等众多实用功能&#xff0c;最重要的就是可以提升我们的下载速度5-20倍&#xff0c;非常的硬核 安装也是比较简单…

SpringBoot使用自带的日志框架(开箱即用,同时输出到文件与控制台)

在SpringBoot内部中&#xff0c;默认就集成了LogBack的日志依赖&#xff0c;所以我们其实在实际开发中不需要直接添加该依赖。 你会发现spring-boot-starter其中包含了 spring-boot-starter-logging&#xff0c;Spring Boot为我们提供了很多默认的日志配置&#xff0c;所以&…

常见的Linux基本指令

目录 什么是Linux&#xff1f; Xshell如何远程控制云服务器 Xshell远程连接云服务器 Linux基本指令 用户管理指令 pwd指令 touch指令 mkdir指令 ls指令 cd指令 rm指令 man命令 cp指令 mv指令 cat指令 head指令 ​编辑 tail指令 ​编辑echo指令 find命令 gr…

【算法题】N进制减法(js)

返回结果-1 const str "2 11 1"; const str1 "8 07 1"; const str2 "16 af ff"; function solution(str) {const [n, minuend, subtrahend] str.split(" ");if (n < 2 || n > 35) return -1;else if (isValid(minuend) &am…

人工智能中的文本分类:技术突破与实战指导

在本文中&#xff0c;我们全面探讨了文本分类技术的发展历程、基本原理、关键技术、深度学习的应用&#xff0c;以及从RNN到Transformer的技术演进。文章详细介绍了各种模型的原理和实战应用&#xff0c;旨在提供对文本分类技术深入理解的全面视角。 关注TechLead&#xff0c;分…

探索SSL证书的应用场景,远不止网站,还有小程序、App Store等

说到SSL证书&#xff0c;我们都知道其是用于实现HTTPS加密保障数据安全的重要工具&#xff0c;在建设网站的时候经常会部署SSL证书。但实际上&#xff0c;SSL证书的应用场景远不止网站&#xff0c;它还被广泛地应用到小程序、App Store、抖音广告、邮件服务器以及各种物联网设备…

web网络安全

web安全 一&#xff0c;xss 跨站脚本攻击(全称Cross Site Scripting,为和CSS&#xff08;层叠样式表&#xff09;区分&#xff0c;简称为XSS)是指恶意攻击者在Web页面中插入恶意javascript代码&#xff08;也可能包含html代码&#xff09;&#xff0c;当用户浏览网页之时&…

html中一个div中平均一行分配四个盒子,可展开与收起所有的盒子

html中一个div中平均一行分配四个盒子&#xff0c;可展开与收起所有的盒子 1.截图显示部分 2.代码展示部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"wid…

测长机:精度与用途解析

测长机是一种用于测量物体长度或距离的专业测量仪器&#xff0c;而且测量结果能够稳定且可靠。其精度是衡量其优劣的重要标准之一。 在制造业中&#xff0c;长度尺寸是所有几何量尺寸测量的基准。通过测量产品的长度&#xff0c;可以及时发现并纠正尺寸偏差&#xff0c;保证产…

JVM的内存分区以及垃圾收集

1.JVM的内存分区 1.1方法区 方法区(永久代&#xff09;主要用来存储已在虚拟机加载的类的信息、常量、静态变量以及即时编译器编译后的代码信息。该区域是被线程共享的。 1.2虚拟机栈 虚拟机栈也就是我们平时说的栈内存&#xff0c;它是为java方法服务的。每个方法在执行的…

Vue--第八天

Vue3 1.优点&#xff1a; 2.创建&#xff1a; 3.文件&#xff1a; 换运行插件&#xff1a; 4.运行&#xff1a; setup函数&#xff1a; setup函数中获取不到this&#xff08;this 在定义的时候是Undefined) reactive()和ref(): 代码&#xff1a; <script setup> // …

解决el-table组件中,分页后数据的勾选、回显问题?

问题描述&#xff1a; 1、记录一个弹窗点击确定按钮后&#xff0c;table列表所有勾选的数据信息2、再次打开弹窗&#xff0c;回显勾选所有保存的数据信息3、遇到的bug&#xff1a;切换分页&#xff0c;其他页面勾选的数据丢失&#xff1b;点击确认只保存当前页的数据&#xff1…

学习MS Dynamics AX 2012编程开发 1. 了解Dynamics AX 2012

在本章中&#xff0c;您将了解开发环境的结构以及Microsoft Dynamics AX中的开发人员可以访问哪些工具。在本书的第一步演练之后&#xff0c;您将很容易理解著名的Hello World代码&#xff0c;您将知道应用程序对象树中的不同节点代表什么。 以下是您将在本章中学习的一些主题…

圆形多线图

const gaugeData [{value: 80,name: Perfect,title: {offsetCenter: [-100%, -100%]},detail: {valueAnimation: true,offsetCenter: [-70%, -100%]},itemStyle: {borderColor: #fff,borderWidth: 6,borderType: solid // 可选&#xff0c;指定边框类型}},{value: 40,name: Go…

MQ-Det: Multi-modal Queried Object Detection in the Wild

首个支持视觉和文本查询的开放集目标检测方法 NeurIPS2023 文章&#xff1a;https://arxiv.org/abs/2305.18980 代码&#xff1a;https://github.com/YifanXu74/MQ-Det 主框图 摘要 这篇文章提出了MQ-Det&#xff0c;一种高效的架构和预训练策略&#xff0c;它利用文本描述的…