element-ui使用el-date-picker日期組件常見場景分析

更新時間：2024年05月10日 09:23:20 作者：南風(fēng)晚來晚相識

最近一直在使用 element-ui中的日期組件,所以想對日期組件常用的做一個簡單的總結(jié),對element-ui el-date-picker日期組件使用場景分析感興趣的朋友一起看看吧

開始

最近一直在使用 element-ui中的日期組件。
所以想對日期組件常用的做一個簡單的總結(jié)；
1.處理日期組件選擇的時候面板聯(lián)動問題
2.限制時間范圍解除兩個日期面板之間的聯(lián)動

解除兩個日期面板之間的聯(lián)動

我們發(fā)現(xiàn)2個日期面板之間其實是有聯(lián)動關(guān)系的；
開始時間面板和結(jié)束時間面板始終只能相鄰；
不能出現(xiàn)開始時間選擇3月，結(jié)束時間是5月這樣的情況；
但是我們有些時候要讓他們之間解除聯(lián)動關(guān)系；
我們需要將 unlink-panels 設(shè)置為true

unlink-panels:在范圍選擇器里取消兩個日期面板之間的聯(lián)動；
它默認(rèn)是false;我們設(shè)置為true就行

限制-選擇今天以及今天之后的時間

<template>
  <div>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      range-separator="至"
      :picker-options="pickerOptions"
      start-placeholder="開始日期"
      end-placeholder="結(jié)束日期"
      align="right">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: { 
         disabledDate(time) {
          // time 表示的是面板中每一個日期值
          // 只能選擇今天以及今天之后的時間
          return time.getTime() < Date.now() - 24*60*60*1000;
         }
      },
      value2: ''
    }
  }
}
</script>

8.64e7 約等于24小時

有的小伙伴說：我看見有些限制時間是這樣寫的
return time.getTime() < Date.now() - 8.64e7
其實8.64e7 約等于24小時；所以并不會影響

限制-只能選擇今天之后的時間

pickerOptions: { 
    disabledDate(time) {
      // 只能選擇今天之后的時間
      // time 表示的是面板中每一個日期值
      return time.getTime() < Date.now()
    }
},

限制-選擇今天以及今天之前的時間

pickerOptions: { 
  disabledDate(time) {
    // 選擇今天以及今天之前的時間
    // time 表示的是面板中每一個日期值
    return time.getTime()  > Date.now();
  }
},

限制-選擇今天之前的時間

pickerOptions: { 
  disabledDate(time) {
    // 選擇今天之前的時間
    // time 表示的是面板中每一個日期值
    return time.getTime() > Date.now() -  24*60*60*1000;
  }
},

限制-選擇當(dāng)前時間以及當(dāng)前之前的7天的時間

<el-date-picker
  v-model="value2"
  type="datetimerange"
  range-separator="至"
  :picker-options="pickerOptions"
  start-placeholder="開始日期"
  end-placeholder="結(jié)束日期"
  align="right">
</el-date-picker>
 data() {
    return {
      pickerOptions: {  
        disabledDate(time) {  
          // 獲取當(dāng)前的時間
          let currentTime = new Date()
          // 重新設(shè)置當(dāng)前時間的 時，分，秒，毫秒
          currentTime.setHours(0,0,0,0)
          // 得到當(dāng)前時間 0時0分0秒的時間戳
          let endTime = currentTime.getTime()
          // 獲取7天前的時間戳
          let startTime = endTime - 6*24*60*60*1000
          // time表示需要需要禁用的時間
          return  time.getTime() < startTime || time.getTime() > endTime
        },  
      },
      value2: ''
    }
  }

限制-時間不能超過當(dāng)前時間,時間跨度不能超過30天

經(jīng)過前面我們的學(xué)習(xí)，我們可以通過
time.getTime() > Date.now();
來限制時間不能超過當(dāng)前時間；
時間跨度我們通過 change 事件來判斷開始時間和結(jié)束時間是否相差30天
于是我們很快完成了功能

<template>
  <div>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      @change="changeTime"
      range-separator="至"
      :picker-options="pickerOptions"
      start-placeholder="開始日期"
      end-placeholder="結(jié)束日期"
      align="right">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {  
        disabledDate(time) {  
          // 選擇今天以及今天之前的時間 
          return time.getTime()  > Date.now();
        },  
      },  
      value2: ''
    }
  },
  methods:{
    changeTime(time){
      if(time && time.length){
        let endTime = time[1].getTime()
        let startTime = time[0].getTime()
        let limitTime= 30 *24 *60*60*1000
        if(endTime - startTime > limitTime){
          this.$message.error('選擇的時間不能超過30天');
          this.value2 = ''
        }
      }else {
        this.$message.error('請選擇時間');
      }
    }
  }
}
</script>

發(fā)現(xiàn)問題

雖然我們上面的代碼實現(xiàn)了功能；但是用戶體驗不是特別不好；
有沒有這樣的方式：當(dāng)用戶選擇了5月2號；
只能選擇它的前30天和后30天范圍的時間(4月2號---6.20號)
如果要實現(xiàn)上面這樣的功能：
1.我們要解決面板聯(lián)動，可以使用 unlink-panels 來解決；
2.我們要知道用戶點擊選擇的時間,這樣我們才能知道開始和結(jié)束;
這樣問題我們可以使用 onPick: date => { }事件知道點擊選中的時間
3.計算出30天前和30天后的時間

選擇的時間范圍不超過7天(為了好演示)

<template>
  <div>
    <el-date-picker v-model="myTime" unlink-panels type="datetimerange" range-separator="至"
      :picker-options="pickerOptions" start-placeholder="開始日期" end-placeholder="結(jié)束日期" align="right">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          // this.userSelectDate 可能是 '',不是一個日期對象;
          // 這個必須要使用括號哈 
          // 如果使用 !this.userSelectDate instanceof Date 仍然是false
          if (!(this.userSelectDate instanceof Date)) {
            return false
          } else {
            let currentTime = time.getTime()
            let userSelectDateTime = this.userSelectDate.getTime()
            // 獲取7天前的時間戳
            let day7beforeTime = userSelectDateTime - 6*24*60*60*1000
            // 獲取7天后的時間戳
            let day7AfterTime = userSelectDateTime + 6*24*60*60*1000
            // 只能選擇 7天前和7天后
            return currentTime > day7AfterTime || currentTime < day7beforeTime
          }
        },
        onPick: date => {
          // minDates就是用戶選擇的初始時間，記錄它是為了得到7天前和7天后的時間
          console.log('用戶選擇時間就是觸發(fā)', date)
          if (date.minDate) {
            // 記錄用戶選擇的時間
            this.userSelectDate = date.minDate
          } else {
            this.userSelectDate = null
          }
        }
      },
      userSelectDate: '',
      myTime:''
    }
  }
}
</script>

又又發(fā)現(xiàn)了問題

上面雖然友好的實現(xiàn)了限制選擇的時間前后不超過7天；
但是沒有限制選擇的時間【不能】選擇今天之后的時間；
我們需要限制一下；
除了 pickerOptions 中的代碼，其他的與上面的一樣保持不變

選擇的時間范圍不超過7天，同時選擇的時間不能選擇今天之后的時間

pickerOptions: {
  disabledDate: time => {
    console.log(11111111111)
    // 限制不能選擇今天之后的時間
    if( Date.now() < time.getTime()){
      return true;
    }else {
      // this.userSelectDate 可能是 '',不是一個日期對象;
      // 這個必須要使用括號哈 
      // 如果使用 !this.userSelectDate instanceof Date 仍然是false
      if (!(this.userSelectDate instanceof Date)) {
        return false
      } else {
        let currentTime = time.getTime()
        let userSelectDateTime = this.userSelectDate.getTime()
        // 獲取7天前的時間戳
        let day7beforeTime = userSelectDateTime - 6*24*60*60*1000
        // 獲取7天后的時間戳
        let day7AfterTime = userSelectDateTime + 6*24*60*60*1000
        // 只能選擇 7天前和7天后
        return currentTime > day7AfterTime || currentTime < day7beforeTime
      }
    }
  }
},

到此這篇關(guān)于element-ui使用el-date-picker日期組件常見場景的文章就介紹到這了,更多相關(guān)element-ui el-date-picker日期組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: