您现在的位置是:今夕何夕> JS 文章详情

Antd Vue DatePicker组件value.locale is not a function

久伴轻尘 2020-04-20 09:23 JS 0人已浏览

在使用antd的时候使用日期组件给默认初始值时候遇到了value.locale is not a function,查阅了文档后发现v-model绑定的值必须是moment类型

参数 说明 类型 默认值
value(v-model) 日期 moment

因为后台存储的日期是'2020-04-20 00:00:00',所以我们需要先将日期转换为moment类型

moment('2020/4/20')

但是这样我们需要在获取后台值后先转成moment对象,而后在保存前在转换为字符串,这样想想都是不可能的

后面在文档中发现了change事件

事件名称 说明 回调参数
change 时间发生变化的回调 function(date: moment, dateString: string)

于是乎,我们可以这样改造

//写一个Vue的全局过滤器
import moment from "moment";
const momentDate = function (date) {
    return date ? moment(date) : undefined;
}

export { momentDate }

//main.js引入
import * as filters from '@/utils/filters'//全局过滤器配置
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

//页面使用
<a-form-model-item label="生日" prop="userBrithday" ref="userBrithday">
   <a-date-picker
      :value="form.userBrithday |momentDate "  
      @change="(momentDate, dataString)=>{form.userBrithday=dataString}"
   />
</a-form-model-item>

这样就可以不用自己在手动去转换为moment对象了