如何使用 antd 和 formik 设置和获取日期选择器值?

本文介绍了如何使用 antd 和 formik 设置和获取日期选择器值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这里我用 antd 创建 Datepicker 并将这个 antd datepicker 传递给 formik 字段.我的 Datepicker 和 antd 示例代码

 import React from "react";从antd"导入 { Form, DatePicker }从formik"导入{字段}；从时刻"导入时刻；const FormItem = Form.Item;函数 onChange(date, dateString) {控制台日志(日期，日期字符串)；}const dateFormat = "MM-DD-YYYY"//这里我通过DateInput添加antd错误信息常量日期输入 = ({场地，形式:{接触，错误}，...道具}) =>{const errorMsg = touch[field.name] &&错误[字段名]const validateStatus = errorMsg ?错误": (touched[field.name] && !errors[field.name]) ?成功": 不明确的返回 (<div><表单项标签={道具.标签}帮助={errorMsg}validateStatus={validateStatus}有反馈{...props.formitemlayout}><DatePicker onChange={onChange} defaultPickerValue={moment()}/></FormItem>

class FormikApollo 扩展 React.Component {使成为() {const { values, handleSubmit, setFieldValue } = this.props返回 (<div align="center"><Form onSubmit={handleSubmit}><字段名称=用户名"标签=名称"占位符="输入名称"组件={TextField}值={values.username}formitemlayout={formItemLayout}/><字段名称=电子邮件"标签=电子邮件"placeholder="输入电子邮件"组件={TextField}值={values.email}formitemlayout={formItemLayout}/><字段名称=密码"标签=密码"类型=密码"占位符="输入密码"组件={TextField}formitemlayout={formItemLayout}/><字段姓名=出生日期"标签=出生日期"类型=日期"组件={日期输入}formitemlayout={formItemLayout}defaultValue={values.dateofbirth}格式={日期格式}/><Button type="primary" htmlType="submit">Submit</Button></表格>)}}

const FormikApp = (withFormik)({mapPropsToValues({ 用户名，电子邮件，密码，出生日期}) {返回 {用户名:用户名 ||'',电子邮件:电子邮件 ||'',密码:密码 ||'',出生日期:出生日期 ||''}},验证架构:是的.对象().形状({用户名:Yup.string().min(3, "用户名必须大于 3 个字符").required("需要用户名"),电子邮件:Yup.string().email("无效邮箱！！").required("需要邮箱"),密码:Yup.string().min(6, "密码必须在 6 个字符以上").required("需要密码"),出生日期:Yup.string().required("日期是必需的")}),handleSubmit(values, { resetForm }) {重置表格();控制台日志(值)}})(FormikApollo)

import React from "react"; import { Form, DatePicker } from "antd" import { Field } from "formik"; import moment from 'moment'; const FormItem = Form.Item; function onChange(date, dateString) { console.log(date, dateString); } const dateFormat = "MM-DD-YYYY" // Here i am adding antd error message through DateInput const DateInput = ({ field, form: { touched, errors }, ...props }) => { const errorMsg = touched[field.name] && errors[field.name] const validateStatus = errorMsg ? "error" : (touched[field.name] && !errors[field.name]) ? "success" : undefined return ( <div> <FormItem label={props.label} help={errorMsg} validateStatus={validateStatus} hasFeedback {...props.formitemlayout}> <DatePicker onChange={onChange} defaultPickerValue={moment()}/> </FormItem> </div> ) } export default DateInput

class FormikApollo extends React.Component { render() { const { values, handleSubmit, setFieldValue } = this.props return ( <div align="center"> <Form onSubmit={handleSubmit}> <Field name="username" label="Name" placeholder="Enter a Name" component={TextField} value={values.username} formitemlayout={formItemLayout} /> <Field name="email" label="Email" placeholder="Enter an Email" component={TextField} value={values.email} formitemlayout={formItemLayout} /> <Field name="password" label="Password" type="password" placeholder="Enter a Password" component={TextField} formitemlayout={formItemLayout} /> <Field name="dateofbirth" label="dateOfBirth" type="date" component={DateInput} formitemlayout={formItemLayout} defaultValue={values.dateofbirth} format={dateFormat} /> <Button type="primary" htmlType="submit">Submit</Button> </Form> ) } }

const FormikApp = (withFormik)({ mapPropsToValues({ username, email, password, dateofbirth }) { return { username: username || '', email: email || '', password: password || '', dateofbirth: dateofbirth || '' } }, validationSchema: Yup.object().shape({ username: Yup.string() .min(3, "Username must be above 3 characters") .required("Username is required"), email: Yup.string() .email("Invalid Email !!") .required("Email is required"), password: Yup.string() .min(6, "Password must be above 6 characters") .required("Password is required"), dateofbirth: Yup.string().required("Date is required") }), handleSubmit(values, { resetForm }) { resetForm(); console.log(values) } })(FormikApollo)