element-ui 限制日期选择的方法(datepicker)

(编辑：jimmy 日期: 2024/5/9 浏览：3 次 )

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

需求场景如下：

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

实现方法不难，利用了 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;
}




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

上一篇：AngularJS中的作用域实例分析
下一篇：npm 更改默认全局路径以及国内镜像的方法