如何以不同的格式存储Redux表单中的值

Question

所以这是关于这个Redux表单的两部分问题。

首先是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)));

Answer 1

您正在寻找format(还有parse(函数道具。现场API