How to limit date selection using element-ui-JS Tutorial-php.cn

How to limit date selection using element-ui

php中世界最好的语言

Release： 2018-05-29 11:49:28

Original

2508 people have browsed it

This time I will show you how to use element-ui to limit date selection, and what are the precautions for using element-ui to limit date selection. The following is a practical case, let's take a look.

Element-UI is a desktop UI framework based on Vue.js 2.0 launched by the Ele.me front-end team. The corresponding framework for mobile phones is Mint UI.

The demand scenarios are as follows:

Specify the start and end dates, and those selected later will be restricted by those selected first
Different Date picker, but there is also a relationship

The implementation method is not difficult, using the change event to dynamically change the picker-options Just disableDate.

View Demo

Template

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script>
<p id="app">
<template>
 <p class="block">
  <span class="demonstration">起始日期</span>
  <el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart" @change="changeEnd">
  </el-date-picker>
 </p>
 
 <p class="block">
  <span class="demonstration">截止日期</span>
  <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd" @change="changeStart">
  </el-date-picker>
 </p>
</template>
</p>

Copy after login

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')

Copy after login

Style

@import url("//unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css");
.block{
 margin-top:10px;
}

Copy after login

I believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website!