13518219792
网站建设资讯

NEWS

网站建设资讯

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

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

成都创新互联是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十多年时间我们累计服务了上千家以及全国政企客户，如除甲醛等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞誉。

需求场景如下：

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

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

查看Demo

Template

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;
}

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


文章标题：element-ui限制日期选择的方法(datepicker)
转载注明：http://njwzjz.com/article/gghsic.html

其他资讯