在 Formik 组件中使用 react-datetime 保存数据时出现问题

Question

我正在尝试将我的默认日期选择器更改为 DateTime。我正在使用 Formik，我知道这是自定义输入的问题。现在，当我保存更改时，正在保存表单，但保存的是当前日期，而不是我选择的日期。任何想法如何解决这一问题？我现在的代码（带有日期选择器的部分）：

<Datetime
    id="dateFrom"
    name="dateFrom"
    placeholder="Enter date"
    value={this.props.dateFrom}
    onChange={this.props.onChange}
    onBlur={this.props.onBlur}
    isInvalid={!!this.props.errors.dateFrom}
    readOnly={this.props.status !== ProjectStatus.InProgress}
 />

之前的值是 this.props.dateFrom，因为在编辑现有条目时显示相同的组件。

Answer 1

我正在做研究，尝试不同的方法并寻求其他开发人员的帮助。我想出了这个解决方案，对我有用：

<Datetime
    id="dateFrom"
    name="dateFrom"
    placeholder="Enter date"
    value={this.props.dateFrom}
    onChange={(dateFromValue) => {this.props.setFieldValue('dateFrom', this.formatDate(dateFromValue))}}
    onBlur={this.props.onBlur}
    isInvalid={!!this.props.errors.dateFrom}
    readOnly={this.props.status !== ProjectStatus.InProgress}
/>

和格式日期函数：

formatDate(momentDate) {        
    return moment(momentDate).format("YYYY-MM-DD");
}

Answer 2

我在 render 中找到了另一个解决方案像这样

<Field
    name="time"
    render={({field,form:{isSubmitting}})=>(
        <Datetime onChange={time=>{setFieldValue('time',time.format('YYYY-MM-DD'))}}/>
    )}
/>

CodeSandbox

在 Formik 组件中使用 react-datetime 保存数据时出现问题

Problem with saving data with react-datetime inside Formik component

javascript

datetimepicker

reactjs

formik