【第011篇】ElementUI的el-date-picker组件设置禁用日期范围(如流转期限,开始日期仅可以选择今天及之前,结束日期可以选择开始日期之后的日期)

本文主要是介绍【第011篇】ElementUI的el-date-picker组件设置禁用日期范围(如流转期限,开始日期仅可以选择今天及之前,结束日期可以选择开始日期之后的日期),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<el-form-item label="流转期限" prop="ycsykssj"><el-date-picker v-model="lzqx" type="daterange" style="width: 100%" range-separator="" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :clearable="false" :picker-options="pickerDisabled" @change="changeDate"></el-date-picker>
</el-form-item>

核心代码:

<script>
export default {data () {return {choiceDate0: '', // 第一个选择的日期choiceDate1: '', // 第二个选择的日期pickerDisabled: {onPick: ({maxDate, // 第一个值minDate // 第二个值}) => {this.choiceDate1 = '' // 每次点击的时候将第二个日期设置为空if (minDate) {this.choiceDate0 = minDate.getTime()} else {this.choiceDate0 = ''}if (maxDate) { // 当选择第二个值后,将第一个值清空。this.choiceDate0 = ''this.choiceDate1 = maxDate.getTime()}},disabledDate: (time) => {// 主要思路:// (1)当没有点击的时候,限制只能选择今天及之前日期// (2)当点击一次后,说明第一个值有值了,此时限制第二个值只能选择第一个值之后的日期// (3)当点击第二次后,说明第二个有值了,此时限制第二个值只能选择第一个值之后的日期const choiceDateTime0 = new Date(this.choiceDate0).getTime() // 选中的第一个日期if (!this.choiceDate0 && !this.choiceDate1) { // 第一个和第二个均无值(说明没有点击)return time.getTime() > new Date() * 1 + 600 * 1000} else if (this.choiceDate0 && !this.choiceDate1) { // 第一个有值,但第二个无值(说明点击了一次)return time.getTime() < choiceDateTime0} else if (!this.choiceDate0 && this.choiceDate1) { // 第一个无值,但第二个有值(说明点击了两次次)return time.getTime() < choiceDateTime0} else {return time.getTime() > new Date() * 1 + 600 * 1000}}}}},methods: {changeDate (date) { // 组件值改变事件,当值改变后将第一个值和第二个值设置为空,方便下次设置日期范围。this.choiceDate0 = ''this.choiceDate1 = ''}}
}
</script>

这篇关于【第011篇】ElementUI的el-date-picker组件设置禁用日期范围(如流转期限,开始日期仅可以选择今天及之前,结束日期可以选择开始日期之后的日期)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

如何Python使用设置word的页边距

《如何Python使用设置word的页边距》在编写或处理Word文档的过程中,页边距是一个不可忽视的排版要素,本文将介绍如何使用Python设置Word文档中各个节的页边距,需要的可以参考下... 目录操作步骤代码示例页边距单位说明应用场景与高级用China编程途小结在编写或处理Word文档的过程中,页边距是一个

Python日期和时间完全指南与实战

《Python日期和时间完全指南与实战》在软件开发领域,‌日期时间处理‌是贯穿系统设计全生命周期的重要基础能力,本文将深入解析Python日期时间的‌七大核心模块‌,通过‌企业级代码案例‌揭示最佳实践... 目录一、背景与核心价值二、核心模块详解与实战2.1 datetime模块四剑客2.2 时区处理黄金法

Java进行日期解析与格式化的实现代码

《Java进行日期解析与格式化的实现代码》使用Java搭配ApacheCommonsLang3和Natty库,可以实现灵活高效的日期解析与格式化,本文将通过相关示例为大家讲讲具体的实践操作,需要的可以... 目录一、背景二、依赖介绍1. Apache Commons Lang32. Natty三、核心实现代

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

exfat和ntfs哪个好? U盘格式化选择NTFS与exFAT的详细区别对比

《exfat和ntfs哪个好?U盘格式化选择NTFS与exFAT的详细区别对比》exFAT和NTFS是两种常见的文件系统,它们各自具有独特的优势和适用场景,以下是关于exFAT和NTFS的详细对比... 无论你是刚入手了内置 SSD 还是便携式移动硬盘或 U 盘,都需要先将它格式化成电脑或设备能够识别的「文

使用easy connect之后,maven无法使用,原来需要配置-Djava.net.preferIPv4Stack=true问题

《使用easyconnect之后,maven无法使用,原来需要配置-Djava.net.preferIPv4Stack=true问题》:本文主要介绍使用easyconnect之后,maven无法... 目录使用easGWowCy connect之后,maven无法使用,原来需要配置-DJava.net.pr

CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

《CentOS和Ubuntu系统使用shell脚本创建用户和设置密码》在Linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设置密码,本文写了一个shell... 在linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设

python处理带有时区的日期和时间数据

《python处理带有时区的日期和时间数据》这篇文章主要为大家详细介绍了如何在Python中使用pytz库处理时区信息,包括获取当前UTC时间,转换为特定时区等,有需要的小伙伴可以参考一下... 目录时区基本信息python datetime使用timezonepandas处理时区数据知识延展时区基本信息

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2