本篇文章主要介绍了element-ui 限制日期选择的方法(datepicker)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI 。
需求场景如下：
- 指定起止日期，后选的将会受到先选的限制
- 不同的日期选择器，不过也存在关联关系
实现方法不难，利用了 change 事件，动态改变 picker-options 中的 disableDate 即可。
查看Demo
Template
<div id="app"> <div class="block"> <span class="demonstration">起始日期</span> </div><div class="block"> <span class="demonstration">截止日期</span> </div></div>
Script
var Main = { data() { return { pickerOptionsStart: {}, picker<mark>来源gaodaimacom搞#^代%!码网</mark>OptionsEnd:{}, 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 } }) } } }; var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
Style
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css"); .block{ margin-top:10px; }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是element-ui 限制日期选择的方法(datepicker)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：element-ui 限制日期选择的方法(datepicker)
转载请注明原文链接：element-ui 限制日期选择的方法(datepicker)
