欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

element-ui限制日期選擇的方法(datepicker)

Element-UI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對(duì)應(yīng)框架是 Mint UI 。

成都創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司,自成立以來(lái)公司不斷探索創(chuàng)新,始終堅(jiān)持為客戶提供滿意周到的服務(wù),在本地打下了良好的口碑,在過(guò)去的十多年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶,如除甲醛等企業(yè)單位,完善的項(xiàng)目管理流程,嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶的一致贊譽(yù)。

需求場(chǎng)景如下:

  1. 指定起止日期,后選的將會(huì)受到先選的限制
  2. 不同的日期選擇器,不過(guò)也存在關(guān)聯(lián)關(guān)系

實(shí)現(xiàn)方法不難,利用了 change 事件,動(dòng)態(tài)改變 picker-options 中的 disableDate 即可。

查看Demo

Template

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

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("http://unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css");

.block{
 margin-top:10px;
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標(biāo)題:element-ui限制日期選擇的方法(datepicker)
分享URL:http://www.chinadenli.net/article2/gghsic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序用戶體驗(yàn)自適應(yīng)網(wǎng)站云服務(wù)器商城網(wǎng)站外貿(mào)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司