element-ui を使用して日付の選択を制限する方法

今回は、element-ui を使用して日付の選択を制限する方法と、element-ui を使用して日付の選択を制限する場合の注意点について説明します。実際のケースを見てみましょう。

Element-UI は、Ele.me フロントエンド チームによって開始された Vue.js 2.0 に基づくデスクトップ UI フレームワークです。携帯電話用の対応するフレームワークは Mint UI です。

需要シナリオは次のとおりです:

1. 開始日と終了日を指定します。後で選択した日付は最初の選択によって制限されます

2. 異なる 日付ピッカーですが、関連する関係もあります

実装方法は難しくなく、change イベントを使ってピッカーオプションのdisableDateを動的に変更するだけです。

デモを見る

テンプレート

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

スクリプト

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

スタイル

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、php 中国語 Web サイトの他の関連記事に注目してください。 ！

推奨読書:

AngularJSを使用してタブ切り替えを実装する方法

Koa2を使用してWeChat QRコードスキャン決済を開発する方法

以上がelement-ui を使用して日付の選択を制限する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。