element-ui使用el-date-picker日期元件常見場景

南风晚来晚相识發表於2024-05-09
UI元件

開始

最近一直在使用 element-ui中的日期元件。
所以想對日期元件常用的做一個簡單的總結；
1.處理日期元件選擇的時候皮膚聯動問題 
2.限制時間範圍

解除兩個日期皮膚之間的聯動

我們發現2個日期皮膚之間其實是有聯動關係的；
開始時間皮膚和結束時間皮膚始終只能相鄰；
不能出現開始時間選擇3月，結束時間是5月這樣的情況；
但是我們有些時候要讓他們之間解除聯動關係；
我們需要將 unlink-panels 設定為true


unlink-panels:在範圍選擇器裡取消兩個日期皮膚之間的聯動；
它預設是false;我們設定為true就行

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

<template>
  <div>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      range-separator="至"
      :picker-options="pickerOptions"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      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;
  }
},

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

<el-date-picker
  v-model="value2"
  type="datetimerange"
  range-separator="至"
  :picker-options="pickerOptions"
  start-placeholder="開始日期"
  end-placeholder="結束日期"
  align="right">
</el-date-picker>

 data() {
    return {
      pickerOptions: {  
        disabledDate(time) {  
          // 獲取當前的時間
          let currentTime = new Date()
          // 重新設定當前時間的 時，分，秒，毫秒
          currentTime.setHours(0,0,0,0)
          // 得到當前時間 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: ''
    }
  }

限制-時間不能超過當前時間,時間跨度不能超過30天

經過前面我們的學習，我們可以透過
time.getTime()  > Date.now();
來限制時間不能超過當前時間；
時間跨度我們透過 change 事件來判斷開始時間和結束時間是否相差30天
於是我們很快完成了功能

<template>
  <div>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      @change="changeTime"
      range-separator="至"
      :picker-options="pickerOptions"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      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>

發現問題

雖然我們上面的程式碼實現了功能；但是使用者體驗不是特別不好；
有沒有這樣的方式：當使用者選擇了5月2號；
只能選擇它的前30天和後30天範圍的時間(4月2號---6.20號)
如果要實現上面這樣的功能：
1.我們要解決皮膚聯動，可以使用 unlink-panels 來解決；
2.我們要知道使用者點選選擇的時間,這樣我們才能知道開始和結束;
  這樣問題我們可以使用 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="結束日期" 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('使用者選擇時間就是觸發', date)
          if (date.minDate) {
            // 記錄使用者選擇的時間
            this.userSelectDate = date.minDate
          } else {
            this.userSelectDate = null
          }
        }
      },
      userSelectDate: '',
      myTime:''
    }
  }
}
</script>


又又發現了問題

上面雖然友好的實現了限制選擇的時間前後不超過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
      }
    }
  }
},


尾聲

沒有想到五一這麼快就結束了；
用了2天時間看完了遮天；
主角是古今第一聖體,荒古聖體;
我是牛馬聖體；不說了，開始幹活

相關文章