Question

这是关于此Redux表单的两部分问题。

首先是type =“ date”的字段。信息以MM / DD / YYYY的形式输入，但是一旦提交，便以YYYY / MM / DD的形式存储。因此，当用户查看该信息时，它会像这样显示。如何将显示的格式改回MM / DD / YYYY？

第二个是用于字段=“ time”的字段。使用AM / PM选择器将其输入为12小时格式，但将其存储为24小时时间。当用户看到该信息时，如何将其显示为12小时而不是24小时？

谢谢。

import React from 'react'; 
import {connect} from 'react-redux'; 
import {Field, reduxForm, focus} from 'redux-form'; 
import {required, nonEmpty} from '../validators'; 
import Input from './input'; 
import {postDate} from '../actions/protected-data'; 
import {withRouter} from 'react-router-dom';

export class AddDateForm extends React.Component {
    onSubmit(values) {
        values.username = this.props.username;
        this.props.dispatch(postDate(values));
        this.props.history.push("/dashboard");
    }
    render() {
        return (
            <form className="my-2 p-3 text-center bg-dark" onSubmit={this.props.handleSubmit(values =>this.onSubmit(values))}>
                <label htmlFor="park">Park Name</label>
                <div>
                <Field
                    component={Input} 
                    type="text" 
                    name="park" 
                    validate={[required, nonEmpty]}
                    placeholder="Park Name"
                />
                </div>
                <label htmlFor="date">Date</label>
                <Field 
                    component={Input} 
                    type="date" 
                    name="date" 
                    validate={[required, nonEmpty]}
                />
                <label htmlFor="startTime">Start Time</label>
                <Field 
                    component={Input} 
                    type="time" 
                    name="startTime"
                    validate={[required, nonEmpty]}
                />
                <label htmlFor="endTime">End Time</label>
                <Field 
                    component={Input}
                    type="time"
                    name="endTime"
                    validate={[required, nonEmpty]}
                />
                <button 
                    className="button mt-3 mx-auto btn-sm btn-primary btn-block" 
                    type="submit" 
                    disabled={this.props.pristine || this.props.submitting}>
                    Submit
                </button>
            </form>
        );
    } }

const mapStateToProps = state => ({
    username: state.auth.currentUser.username });

export default reduxForm({
    form: 'add',
    onSubmitFail: (errors, dispatch) =>
        dispatch(focus('contact', Object.keys(errors)[0])) }(withRouter(connect(mapStateToProps)(AddDateForm)));

Answer 1

您正在寻找format（还有parse）功能道具。 Field API

您如何以其他格式存储Redux-Form中的值？

1 个答案: