当我们使用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:这篇文章是作者遇到这个需求时,使用战略合作伙伴百度没找到合适文章后,参考官方文档后发现的解决办法,希望能帮助到你!

Logo

前往低代码交流专区

更多推荐