ant design form表单的时间处理

用ant design开发程序时，会碰到时间的字段，效果如下：

那么该怎么处理呢？
可以在表单中使用如下代码：

import { DatePicker } from 'antd'
import Moment from 'moment'<FormItem label="开始时间" {...formItemLayout}>{ getFieldDecorator('sdate', {initialValue: item.sdate ? Moment(item.sdate) : Moment(),})(<DatePicker showTime showToday format="YYYY-MM-DD HH:mm:ss" />)}</FormItem>//  item.sdate 代表从后台server获得的值 如：2018-06-27 12:00:00

而在提交处理的时候需要进行转换，获得对象对应的值

    if (data.sdate) {// 进行转换data.sdate = data.sdate.format("YYYY-MM-DD HH:mm:ss")}

这样，在提交的时候，data.sdate 就是形如 "2018-06-27 12:00:00" 的值了。

转载于:https://blog.51cto.com/9681602/2133198

ant design form表单的时间处理相关推荐

antdesign卡片_10分钟精通Ant Design Form表单
目录被人诟病的Form Form的原理 Vue版Form的进化史本文适合React.Vue开发者阅读,10分钟不够?那就再加10分钟. 被人诟病的Form antd被人吐槽最多的除了彩蛋之外,那应该就 ...
android 自定义表单,Android实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
antd Design Form表单的简单理解
关于react+ant的运用配合的学习心得,还是新手各位大佬见谅 1 对于普通的开发需求来说(仅仅限于类组件) 引入Form 关于Form 有以下几种常用属性 <Form ></Fo ...
[ant design vue] 关于ant design vue 表单报错合集
情况一:当我点击新增时会报以下错误: 原因是我在使用v-decorator的同时使用了v-model,如下图: 解决方案就是:把v-model删掉,需要动态获取值,可以通过: this.form.ge ...
[ant design vue] 表单验证成功，提示信息不显示
以上是原图以及源代码,input中带有表单验证,但是输入0以后却不显示报错信息,后来通过大哥指点,因为一个a-form-item只验证一个input,所以给每一个input加一个a-form-item ...
Ant Design Vue表单验证基本操作
通过 rules 属性传入约定的验证规则.并将 <a-form-item> 的 prop 属性设置为需校验的字段名即可 formRef.value .validate() 触发效验提示通 ...
form表单，时间防呆
mounted() {this.calculationTime()}, methods: {calculationTime() {/** 开始时间必须小于结束时间 */let startTimeVal ...
antd design form表单手动处理错误
虽然官方的自动校验很好用,但是很多时候还是需要手动控制报错和错误处理,清除手动设置的错误方案是: this.props.form.setFields({ enableTime: { ...

ant design form表单的时间处理

ant design form表单的时间处理

ant design form表单的时间处理相关推荐

最新文章

热门文章