ant-design-vue ui时间选择器使用理解

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

针对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包裹你所取得的时间即可

以上是 ant-design-vue ui时间选择器使用理解 的全部内容， 来源链接： utcz.com/z/378380.html

回到顶部