ant-design-vueui时间选择器使⽤理解针对Ant design vue时间选择框使⽤
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 = dValue;
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) {
}
},
handleEndOpenChange(open) {
},
},
};
</script>
  实际业务流程如下:
  1.根据双向数据绑定v-modle,可以取得所选择的时间,
ant design   2.将时间转化为毫秒时间戳传给后台,
  3.⽽当前端需要从后台获取时间,取得当前时间的时间戳,
  4.直接将取得的毫秒数通过new Date(time)转化为标准时间,结果会发现这个组件的value值类型为moment,直接赋值会警告value.farmat  is not a funtion。
  解决⽅案:
  项⽬引⼊momentjs,由于DatePicker的时间格式定义中参照momentjs⽅便开发者⾃定义时间格式,
  对取得的后台时间戳进⾏简单转化new Date(time),
  在使⽤的时候需要⽤moment(time),即使⽤moment包裹你所取得的时间即可