基於Vue組件化的日期聯動選擇器

時間 2019-11-07

標籤基於 vue 組件日期聯動選擇器简体版

原文原文鏈接

咱們的社區前端工程用的是element組件庫，後臺管理系統用的是iview，組件庫都很棒，可是日期、時間選擇器沒有那種「年份 - 月份 -天數」聯動選擇的組件。雖然兩個組件庫給出的相關組件也很棒，可是有時候確實不是太好用，不太明白爲何不少組件庫都拋棄了日期聯動選擇。所以考慮本身動手作一個。前端

將時間戳轉換成日期格式

// timestamp 爲時間戳
new Date(timestamp)
//獲取到時間標磚對象，如：Sun Sep 02 2018 00:00:00 GMT+0800 (中國標準時間)

/*
   獲取年： new Date(timestamp).getFullYear()
   獲取月： new Date(timestamp).getMonth() + 1
   獲取日： new Date(timestamp).getDate() 
   獲取星期幾： new Date(timestamp).getDay() 
*/
複製代碼

將日期格式(yyyy-mm-dd)轉換成時間戳

//三種形式
 new Date('2018-9-2').getTime()
 new Date('2018-9-2').valueOf()
 Date.parse(new Date('2018-9-2'))
複製代碼

IE下的兼容問題

注意：上述代碼在IE10下(至少包括IE10)是無法或獲得標準時間value的，由於 2018-9-2 並非標準的日期格式(標準的是 2018-09-02)，而至少 chrome 內核爲咱們作了容錯處理(估計火狐也兼容)。所以，必須得作嚴格的日期字符串整合操做，萬不可偷懶chrome

基於Vue組件化的日期聯機選擇器

該日期選擇組件要達到的目的以下：bash

(1) 當前填入的日期不論完整或缺省，都要向父組件傳值（缺省傳''），由於父組件要根據獲取的日期值作相關處理（如限制提交等操做等）；less

(2) 具體天數要作自適應，即大月31天、小月30天、2月平年28天、閏年29天；iview

(3) 如先選擇天數爲31號(或30號)，再選擇月數，如當前選擇月數不含已選天數，則清空天數；組件化

(4) 如父組件有時間戳傳入，則要將時間顯示出來供組件修改。學習

實現代碼(使用的是基於Vue + element組件庫)ui

<template>
    <div class="date-pickers">
       <el-select 
       class="year select"
       v-model="currentDate.year"
        @change='judgeDay'
        placeholder="年">
          <el-option
            v-for="item in years"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
       </el-select>
       <el-select 
       class="month select"
       v-model="currentDate.month" 
       @change='judgeDay'
       placeholder="月">
          <el-option
            v-for="item in months"
            :key="item"
            :label="String(item).length==1?String('0'+item):String(item)"
            :value="item">
          </el-option>
       </el-select>
       <el-select 
       class="day select"
       :class="{'error':hasError}"
       v-model="currentDate.day" 
       placeholder="日">
          <el-option
            v-for="item in days"
            :key="item"
            :label="String(item).length==1?String('0'+item):String(item)"
            :value="item">
          </el-option>
       </el-select>
    </div>
</template>
<script>
export default {
  props: {
    sourceDate: {
      type: [String, Number]
    }
  },
  name: "date-pickers",
  data() {
    return {
      currentDate: {
        year: "",
        month: "",
        day: ""
      },
      maxYear: new Date().getFullYear(),
      minYear: 1910,
      years: [],
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      normalMaxDays: 31,
      days: [],
      hasError: false
    };
  },
  watch: {
    sourceDate() {
      if (this.sourceDate) {
        this.currentDate = this.timestampToTime(this.sourceDate);
      }
    },
    normalMaxDays() {
      this.getFullDays();
      if (this.currentDate.year && this.currentDate.day > this.normalMaxDays) {
        this.currentDate.day = "";
      }
    },
    currentDate: {
      handler(newValue, oldValue) {
        this.judgeDay();
        if (newValue.year && newValue.month && newValue.day) {
          this.hasError = false;
        } else {
          this.hasError = true;
        }
        this.emitDate();
      },
      deep: true
    }
  },
  created() {
    this.getFullYears();
    this.getFullDays();
  },
  methods: {
    emitDate() {
      let timestamp; //暫默認傳給父組件時間戳形式
      if ( this.currentDate.year && this.currentDate.month && this.currentDate.day) {
         let month = this.currentDate.month < 10 ? ('0'+ this.currentDate.month):this.currentDate.month;
         let day = this.currentDate.day < 10 ? ('0'+ this.currentDate.day):this.currentDate.day;
         let dateStr = this.currentDate.year + "-" + month + "-" + day;
         timestamp = new Date(dateStr).getTime();
      } 
      else {
         timestamp = "";
      }
      this.$emit("dateSelected", timestamp);
    },
    timestampToTime(timestamp) {
      let dateObject = {};
      if (typeof timestamp == "number") {
        dateObject.year = new Date(timestamp).getFullYear();
        dateObject.month = new Date(timestamp).getMonth() + 1;
        dateObject.day = new Date(timestamp).getDate();
        return dateObject;
      }
    },
    getFullYears() {
      for (let i = this.minYear; i <= this.maxYear; i++) {
        this.years.push(i);
      }
    },
    getFullDays() {
      this.days = [];
      for (let i = 1; i <= this.normalMaxDays; i++) {
        this.days.push(i);
      }
    },
    judgeDay() {
      if ([4, 6, 9, 11].indexOf(this.currentDate.month) !== -1) {
        this.normalMaxDays = 30; //小月30天
        if (this.currentDate.day && this.currentDate.day == 31) {
          this.currentDate.day = "";
        }
      } else if (this.currentDate.month == 2) {
        if (this.currentDate.year) {
          if (
            (this.currentDate.year % 4 == 0 &&
              this.currentDate.year % 100 != 0) ||
            this.currentDate.year % 400 == 0
          ) {
            this.normalMaxDays = 29; //閏年2月29天
          } else {
            this.normalMaxDays = 28; //閏年平年28天
          }
        } 
        else {
          this.normalMaxDays = 28;//閏年平年28天
        }
      } 
      else {
        this.normalMaxDays = 31;//大月31天
      }
    }
  }
};
</script>
<style lang="less">
.date-pickers {
  .select {
    margin-right: 10px;
    width: 80px;
    text-align: center;
  }
  .year {
    width: 100px;
  }
  .error {
    .el-input__inner {
      border: 1px solid #f1403c;
      border-radius: 4px;
    }
  }
}
</style>
複製代碼

代碼解析

默認天數(normalMaxDays)爲31天，最小年份1910，最大年份爲當前年（由於個人業務場景是填寫生日，你們這些均可以本身調）並在created 鉤子中先初始化年份和天數。this

監聽當前日期(currentDate)

核心是監聽每一第二天期的改變，並修正normalMaxDays，這裏對currentDate進行深監聽，同時發送到父組件,監聽過程:spa

watch: {
    currentDate: {
      handler(newValue, oldValue) {
        this.judgeDay(); //更新當前天數
        this.emitDate(); //發送結果至父組件或其餘地方
      },
      deep: true
    }
}
複製代碼

judgeDay方法：

judgeDay() {
  if ([4, 6, 9, 11].indexOf(this.currentDate.month) !== -1) {
    this.normalMaxDays = 30; //小月30天
    if (this.currentDate.day && this.currentDate.day == 31) {
      this.currentDate.day = ""; 
    }
  } else if (this.currentDate.month == 2) {
    if (this.currentDate.year) {
      if (
        (this.currentDate.year % 4 == 0 &&
          this.currentDate.year % 100 != 0) ||
        this.currentDate.year % 400 == 0
      ) {
        this.normalMaxDays = 29; //閏年2月29天
      } else {
        this.normalMaxDays = 28; //平年2月28天
      }
    } else {
      this.normalMaxDays = 28; //平年2月28天
    }
  } else {
    this.normalMaxDays = 31; //大月31天
  }
}
複製代碼

最開始的時候我用的 includes判斷當前月是不是小月：

if([4, 6, 9, 11].includes(this.currentDate.month))
複製代碼

也是缺少經驗，最後測出來includes 在IE10不支持，所以改用普通的indexOf()。

emitDate：

emitDate() {
  let timestamp; //暫默認傳給父組件時間戳形式
  if ( this.currentDate.year && this.currentDate.month && this.currentDate.day) {
     let month = this.currentDate.month < 10 ? ('0'+ this.currentDate.month):this.currentDate.month;
     let day = this.currentDate.day < 10 ? ('0'+ this.currentDate.day):this.currentDate.day;
     let dateStr = this.currentDate.year + "-" + month + "-" + day;
     timestamp = new Date(dateStr).getTime();
  } 
  else {
     timestamp = "";
  }
  this.$emit("dateSelected", timestamp);//發送給父組件相關結果
},
複製代碼

這裏須要注意的，最開始並無作上述標準日期格式處理，由於chrome作了適當容錯，可是在IE10就不行了，因此最好要作這種處理。

normalMaxDays改變後必須從新獲取天數，並依狀況清空當前選擇天數：

watch: {
    normalMaxDays() {
      this.getFullDays();
      if (this.currentDate.year && this.currentDate.day > this.normalMaxDays) {
        this.currentDate.day = "";
      }
    }
}
複製代碼