极乐门资源网 Design By www.ioogu.com

Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。

需求场景如下:

  1. 指定起止日期,后选的将会受到先选的限制
  2. 不同的日期选择器,不过也存在关联关系

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

查看Demo

Template

<script src="/UploadFiles/2021-04-02/vue.js">

Script

var Main = {
  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
      }
    })
   }
  }
 };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Style

@import url("//unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css");

.block{
 margin-top:10px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
elementui,日期限制,elementui,日期选择,element,ui日期选择器

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“element-ui 限制日期选择的方法(datepicker)”

暂无element-ui 限制日期选择的方法(datepicker)的评论...