Ant Design Vue 时间选择框a-date-picker 表单处理
当我们使用Ant Design提供的时间选择框时,他默认在表单中的值是moment类型,就是使用moment()函数处理过的一串字符。我这里的需求是,后端使用一个10位的int来存储时间戳,需要把这里默认的moment转成一个10位的数字来提交post请求。这一步是编辑场景下选择器从时间戳转为moment<!-- 时间选择器 --><a-date-pickerv-else-if=
·
当我们使用Ant Design提供的时间选择框时,他默认在表单中的值是moment类型,就是使用moment()函数处理过的一串字符。
我这里的需求是,后端使用一个10位的int来存储时间戳,需要把这里默认的moment转成一个10位的数字来提交post请求。
这一步是编辑场景下选择器从时间戳转为moment
<!-- 时间选择器 -->
<a-date-picker
v-else-if="item.inputType == 'date'"
v-decorator="[
`${item.field}`,
{
rules: item.rules,
},
]"
show-time
format="YYYY-MM-DD HH:mm:ss"
/>
这里的mdl是这样,上面的代码是公共表单弹窗(modal)组件,mdl是将表单内的值传递进去的,在表单渲染发生前,就可以将时间戳提前转为moment。
this.mdl.startTime = moment(this.mdl.startTime*1000)
this.mdl.endTime = moment(this.mdl.endTime*1000)
const form = this.$refs.createModal.form
this.confirmLoading = true
form.validateFields((errors, values) => {
if (!errors) {
values.cover = this.$refs.createModal.imageUrl
values.startTime = parseInt(moment(values['startTime']).valueOf() / 1000)
values.endTime = parseInt(moment(values['endTime']).valueOf() / 1000)
}
这里是公共表单组件提交按钮的回调,通过validateFields验证完表单各字段规则后,准备提交前,我们将要提交的values中的时间字段,通过parseInt转为我们需要的字符串,如果你是存储13位的时间戳可以忽略掉后面的 / 1000。
ps:这篇文章是作者遇到这个需求时,使用战略合作伙伴百度没找到合适文章后,参考官方文档后发现的解决办法,希望能帮助到你!
更多推荐
已为社区贡献3条内容
所有评论(0)