element-ui를 사용하여 날짜 선택을 제한하는 방법

이번에는 element-ui를 사용하여 날짜 선택을 제한하는 방법과 element-ui를 사용하여 날짜 선택을 제한할 때 어떤 주의사항이 있는지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

Element-UI는 Ele.me 프론트엔드 팀이 출시한 Vue.js 2.0 기반의 데스크톱 UI 프레임워크입니다. 휴대폰용 프레임워크는 Mint UI입니다.

수요 시나리오는 다음과 같습니다.

1. 시작 날짜와 종료 날짜를 지정하고 나중에 선택한 날짜는 첫 번째 선택에 의해 제한됩니다

2. 다른 날짜 선택기이지만 관계도 있습니다

구현 방법은 어렵지 않습니다. 선택기 옵션에서 비활성화 날짜를 동적으로 변경하려면 변경 이벤트를 사용하면 됩니다.

데모 보기

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요. !

추천 자료:

AngularJS를 사용하여 탭 전환을 구현하는 방법

Koa2를 사용하여 WeChat QR 코드 스캐닝 결제를 개발하는 방법

위 내용은 element-ui를 사용하여 날짜 선택을 제한하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!