ant-design-vue ui時間選擇器使用理解

針對Ant design vue時間選擇框使用

附：Ant Design Vue       https://www.antdv.com/components/date-picker-cn/

DatePicker日期選擇框

這是一段官網案例，

<template>
  <div>
    <a-date-picker
      v-model="startValue"
      :disabled-date="disabledStartDate"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      placeholder="Start"
      @openChange="handleStartOpenChange"
    />
    <a-date-picker
      v-model="endValue"
      :disabled-date="disabledEndDate"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      placeholder="End"
      :open="endOpen"
      @openChange="handleEndOpenChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      startValue: null,
      endValue: null,
      endOpen: false,
    };
  },
  watch: {
    startValue(val) {
      console.log('startValue', val);
    },
    endValue(val) {
      console.log('endValue', val);
    },
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
  },
};
</script>

　　實際業務流程如下：

　　1.根據雙向數據綁定v-modle，可以取得所選擇的時間，

　　2.將時間轉化為毫秒時間戳傳給后台，

　　3.而當前端需要從后台獲取時間，取得當前時間的時間戳，

　　4.直接將取得的毫秒數通過new Date（time）轉化為標准時間，結果會發現這個組件的value值類型為moment，直接賦值會警告value.farmat  is not a funtion。

　　解決方案：

　　項目引入momentjs，由於DatePicker的時間格式定義中參照momentjs方便開發者自定義時間格式，

　　對取得的后台時間戳進行簡單轉化new Date（time），

　　在使用的時候需要用moment（time），即使用moment包裹你所取得的時間即可