elementUI(datepicker)限制日日期的选择

简介: elementUI(datepicker)限制日日期的选择

指定起始日期,后选的将会受到先选的限制


参考地址 https://www.jianshu.com/p/c59c8ef6c500


实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDate 即可。


其实这个方法 是我从上面这个大佬身上拷贝过来的。目的是为了下次遇见的时候。


也可以快速解决问题、至于为什么这么用。我也没有弄明白。


你们可以去问大佬 https://www.jianshu.com/p/c59c8ef6c500


<div id="app">
        <div class="block">
            <span class="demonstration">起始日期</span>
            <el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart"
                @change="changeEnd">
            </el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">截止日期</span>
            <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd"
                @change="changeStart">
            </el-date-picker>
        </div>
    </div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                pickerOptionsStart: {},
                pickerOptionsEnd: {},
                startDate: '',
                endDate: '',
            };
        },
        methods: {
            changeStart() {
                // 赋值
                this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
                    disabledDate: (time) => {
                        return time.getTime() > this.endDate
                    }
                })
            },
            changeEnd() {
                this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
                    disabledDate: (time) => {
                        return time.getTime() < this.startDate
                    }
                })
            }
        }
    })
</script>


1425695-20200329200032615-320512719.png


相关文章
|
Python
VSCode运行Python教程
VSCode运行Python教程
2474 0
VSCode运行Python教程
|
存储 网络协议 编译器
【干货总结】Linux C/C++面试知识点
Linux C/C++基础与进阶知识点,不仅用于面试,平时开发也用得上!
1035 116
|
Java Android开发 Spring
idea开发常用快捷键总结
idea开发常用快捷键总结
535 9
|
安全 Java API
【Java面试题汇总】Java基础篇——String+集合+泛型+IO+异常+反射(2023版)
String常量池、String、StringBuffer、Stringbuilder有什么区别、List与Set的区别、ArrayList和LinkedList的区别、HashMap底层原理、ConcurrentHashMap、HashMap和Hashtable的区别、泛型擦除、ABA问题、IO多路复用、BIO、NIO、O、异常处理机制、反射
【Java面试题汇总】Java基础篇——String+集合+泛型+IO+异常+反射(2023版)
|
12月前
|
算法 Java 数据库连接
.NET 内存管理两种有效的资源释放方式
【10月更文挑战第14天】在 .NET 中,`IDisposable` 接口提供了一种标准机制来释放非托管资源,如文件句柄、数据库连接等。此类资源需手动释放以避免泄漏。实现 `IDisposable` 的类可通过 `Dispose` 方法释放资源。使用 `using` 语句可确保资源自动释放。此外,.NET 的垃圾回收器会自动回收托管对象所占内存,提高程序效率。示例代码展示了如何使用 `MyFileHandler` 类处理文件操作并释放 `FileStream` 资源。
202 2
|
监控 数据挖掘 数据安全/隐私保护
ERP系统中的客户关系管理(CRM)
【7月更文挑战第25天】 ERP系统中的客户关系管理(CRM)
880 3
|
监控 安全 网络安全
Windows系统安全深度解析:挑战、策略与全面防护
对敏感数据进行加密是保护数据机密性的重要手段。使用强加密算法对敏感数据进行加密存储和传输,即使数据被窃取也无法被轻易解密。此外,还可以考虑使用全磁盘加密技术来保护整个系统的数据安全性。
|
搜索推荐
【异常】Caused by: io.netty.channel.AbstractChannel$AnnotatedConnectException: Connection refused: no further information: /127.0.0.1:9300
Caused by: io.netty.channel.AbstractChannel$AnnotatedConnectException: Connection refused: no further information: /127.0.0.1:9300
4761 0
【异常】Caused by: io.netty.channel.AbstractChannel$AnnotatedConnectException: Connection refused: no further information: /127.0.0.1:9300
|
网络协议
网络层有哪些常见协议
网络层有哪些常见协议
|
机器学习/深度学习
马修斯相关系数MCC简介
在评估机器学习模型的性能时,F1score都被首选指标。在本文中,我们将介绍一个值得更多关注和认可的替代度量:马修斯相关系数(MCC)。
1106 0