如何以不同的格式存储来自 Redux-Form 的值？答案

【问题标题】：How do you store the values from a Redux-Form in a different format?如何以不同的格式存储来自 Redux-Form 的值？
【发布时间】：2019-04-20 17:41:24
【问题描述】：

所以这是一个关于这个 Redux-Form 的两部分问题。

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

第二个是 type="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)));

【问题讨论】：

标签： javascript forms redux react-redux redux-form

【解决方案1】：

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

【讨论】：

我之前正在阅读该页面，但它没有显示任何具体操作示例。您知道如何以这种特定形式实现格式道具吗？或者你有任何例子的链接吗？