a-date-picker应用在Vue项目 数据回显

最近项目用的Ant Design 使用 DatePicker 日期选择组件时遇到了一个小问题. 后端返回的数据是'YYYY-MM-DD'格式的字符串,而DatePicker绑定的是moment个格式的日期,获取来的数据直接赋值给绑定字符串当修改时就会造成无法修改,会报错. 在网上找到了一个答案解决了问题,记录一下

修改方法

1. birthday是组件绑定字段

<a-date-picker v-model="birthday"
                         format="YYYY-MM-DD"
                         @change="TimeChang"
                         :locale="locale"
                         placeholder="请选择您的生日" />

2.项目安装引入 moment 对日期进行格式化

//安装
npm install moment -save

//引入
import moment from 'moment'

3. data后端返回数据,做数据回显

//在项目中安装引入 moment 
//data是后端返回数据对象  将数据格式转化一下赋值 
 this.birthday = moment(data.birthday, 'YYYY-MM-DD')

这样就可以正常数据回显了

4. 组件自带的change事件,修改时间将时间转换成字符串'YYYY-MM-DD',传给后端

//组件的change事件
TimeChang (date, dateString) {
//再转化一下时间赋值给绑定字段
      this.birthday = moment(dateString, 'YYYY-MM-DD')
    },

change事件中的dateString 可以直接获取到选择的日期 是字符串'YYYY-MM-DD'格式的.

如果不做步骤3 后端数据回显就可以直接赋值使用, 记录一下自己遇到的坑,如有错误多多指点.

参考cdn.modb.pro/db/81785