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.mzph.cn/news/222765.shtml

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

相关文章

linux设置环境变量

linux设置环境变量 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; Linux设置环境变量&#xff1a;打造个性化开发环境 在Linux系统中&#xff0c;环境变量是一项…

Kubernetes 容器编排(1)

前言 知识扩展 早在 2015 年 5 月&#xff0c;Kubernetes 在 Google 上的搜索热度就已经超过了 Mesos 和 Docker Swarm&#xff0c;从那儿之后更是一路飙升&#xff0c;将对手甩开了十几条街,容器编排引擎领域的三足鼎立时代结束。 目前&#xff0c;AWS、Azure、Google、阿里云…

使用 PyTorch FSDP 微调 Llama 2 70B

引言 通过本文&#xff0c;你将了解如何使用 PyTorch FSDP 及相关最佳实践微调 Llama 2 70B。在此过程中&#xff0c;我们主要会用到 Hugging Face Transformers、Accelerate 和 TRL 库。我们还将展示如何在 SLURM 中使用 Accelerate。 完全分片数据并行 (Fully Sharded Data P…

深入学习 C++编程,数据结构与算法关系

数据结构是计算机科学中非常重要的概念之一。它是一种组织和存储数据的方式&#xff0c;能够有效地操作和管理数据&#xff0c;以便提高算法的效率。 以下是一些为什么要有数据结构的原因&#xff1a; (1) 数据组织&#xff1a;数据结构可以帮助我们组织和管理大量的数据。通过…

【elementui笔记:el-table表格的输入校验】

之前做得比较多的校验是在el-form表单里做的&#xff0c;但有时也遇到&#xff0c;需要在table内输入数据&#xff0c;然后校验输入的数据是否符合要求的情况。因此记录一下。 思路&#xff1a; 1.需要借助el-form的校验&#xff0c;el-table外层嵌套一层el-form&#xff0c;使…

什么是数据分析?

定义 一般我们想要学习某个东西&#xff0c;都是从定义开始的。那么什么是数据分析呢&#xff1f; 数据分析翻过来其实就可以当作它的定义了&#xff0c;即分析数据。 百科上面的解释也很类似&#xff0c;即分析数据、找规律&#xff0c;用以指导决策。 商业意义 那么数据…

世界5G大会

会议名称:世界 5G 大会 时间:2023 年 12 月 5 日-12 月 8 日 地点:河南郑州 一、会议简介 世界 5G 大会,是由国务院批准,国家发展改革委、科技部、工 信部与地方政府共同主办,未来移动通信论坛联合属地主管厅局联合 承办,邀请全球友好伙伴共同打造的全球首个 5G 领域…

CleanMyMac X2024值不值得下载?

macOS已经成为最受欢迎的桌面操作系统之一&#xff0c;它提供了直观、简洁的用户界面&#xff0c;使用户可以轻松使用和管理系统。macOS拥有丰富的应用程序生态系统&#xff1b;还可以与其他苹果产品和服务紧密协作&#xff0c;如iPhone、iPad&#xff0c;用户可以通过iCloud同…

# 和 $ 的区别②

上节博客说了使用 # 的时候,如果参数为 String ,会自动加上单引号 但是当参数为String 类型的时候,也有不需要加单引号的情况,这时候用 # 那就会出问题 比如根据 升序(asc) 或者 降序(desc) 查找的时候,加了单引号那就会报错 这个时候我们就只能使用 $ 如果看不懂代码,就去…

jmeter,同一线程组内,调用cookie实现接口关联

取cookie方式参考上一篇&#xff1a;jemeter&#xff0c;取“临时重定向的登录接口”响应头中的cookie-CSDN博客 元件结构 登录后要执行的接口为“api/get_event_list/”&#xff0c;在该HTTP请求下创建HTTP信息头管理器&#xff0c;配置如下&#xff1a; 执行测试后&#xff0…

mysql比较varchar值大小_Mysql varchar大小长度问题

1、限制规则 字段的限制在字段定义的时候有以下规则&#xff1a; a) 存储限制 varchar 字段是将实际内容单独存储在聚簇索引之外&#xff0c;内容开头用1到2个字节表示实际长度(长度超过255时需要2个字节)&#xff0c;因此最大长度不能超过65535。 b) 编码长度限制 字符类…

Spark on Yarn 安装配置实验(3.1.1)

子任务二: Spark on Yarn 安装配置 本任务需要使用 root 用户完成相关配置, 已安装 Hadoop 及需要配置前置环境,具体要求如下: 1 、从宿主机 /opt 目录下将文件 spark-3.1.1-bin-hadoop3.2.tgz 复制到容器 Master 中的 /opt/software (若 路径不存在,则需新…

Docker网络模式:深度理解与容器网络配置

Docker 的网络模式是容器化应用中一个关键而复杂的方面。本文将深入讨论 Docker 的网络模式&#xff0c;包括基本概念、常用网络模式以及高级网络配置&#xff0c;并通过更为丰富和实际的示例代码&#xff0c;帮助读者全面掌握如何理解和配置容器网络。 Docker网络基础 1 Doc…

Android--Jetpack--Navigation详解

须知少日拏云志&#xff0c;曾许人间第一流 一&#xff0c;定义 Navigation 翻译成中文就是导航的意思。它是谷歌推出的Jetpack的一员&#xff0c;其目的主要就是来管理页面的切换和导航。 Activity 嵌套多个 Fragment 的 UI 架构模式已经非常普遍&#xff0c;但是对 Fragmen…

力扣63. 不同路径 II

动态规划 思路&#xff1a; 假设 dp[i][j] 是到达第 i 行、第 j 列的路径数量&#xff1b;因为只能向右或者向下移动&#xff0c;所以状态转移方程&#xff1a; 当v[i][j] 0时&#xff0c;dp[i][j] dp[i - 1][j] dp[i][j - 1]&#xff1b;当v[i][j] 1时&#xff0c;dp[i][…

C#调用zlib1.dll错误排查

C#编写64位程序&#xff0c;使用下列代码调用程序时出现 试图加载格式不正确的程序 报错&#xff0c;排查发现zlib1.dll文件为32位的&#xff0c;找了64位的替换一下就行了。&#xff08;PS&#xff1a;在我开发电脑上就没有任何问题&#xff0c;在部署电脑上就会报错&#xff…

Sql标准梳理

SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系型数据库管理系统&#xff08;RDBMS&#xff09;的标准化语言。SQL标准由国际标准化组织&#xff08;ISO&#xff09;和美国国家标准化组织&#xff08;ANSI&#xff09;制定和维护&#xff0c;旨在提供…

SpringIOC之FilterType

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

企业应用开发中.NET EF常用哪种模式?

EF/EF Core介绍 Entity Framework (EF) Core 是轻量化、可扩展、开源和跨平台版的常用 Entity Framework 数据访问技术&#xff0c;EF Core 是适用于 .NET 的现代对象数据库映射器。它支持 LINQ 查询、更改跟踪、更新和架构迁移。EF Core 通过提供程序插件 API 与 SQL Server、…

【Mysql】myisam和innodb的区别?

0 回答 myisam引擎是5.1版本之前的默认引擎,支持全文检索、压缩、空间函数等,但是不支持事务和行级锁,所以一般用于有大量查询少量插入的场景来使用,而且myisam不支持外键,并且索引和数据是分开存储的。innodb是基于聚簇索引建立的,和myisam相反它支持事务、外键,并且通…