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

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

修改方法

1. birthday是组件绑定字段

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

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

javascript复制代码//安装 npm install moment -save  //引入 import moment from 'moment'

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

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

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

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

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

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

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

作者：种下bug的日子
链接：https://juejin.cn/post/7091170099528204295
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。