How to limit date selection using element-ui

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:

1. Specify the start and end dates, and those selected later will be restricted by those selected first

2. 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>

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

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!

Recommended reading:

How to use AngularJS to implement tab switching

How to use Koa2 to develop WeChat 2D Scan the QR code to pay

The above is the detailed content of How to limit date selection using element-ui. For more information, please follow other related articles on the PHP Chinese website!