Reactjs 如何设置反应日期选择器的空初始值?

Reactjs 如何设置反应日期选择器的空初始值?,reactjs,redux,react-redux,react-datepicker,Reactjs,Redux,React Redux,React Datepicker,我有一个redux表单,它使用react date picker作为它的日期组件,现在在编辑模式下打开表单时,在某些情况下,date字段没有值或者它有一个空(“”)值。现在,在这种情况下,如果我的react date picker组件没有找到任何合适的值来解析它,它会在组件上显示“无效日期”,我尝试传递null,或者设置一个检查,如果没有任何日期,或者它是空的,传递未定义或null,我在谷歌上搜索了很多,但没有找到任何合适的答案。我的代码如下所示 我的redux表单中的自定义日期选择器组件:

我有一个redux表单,它使用react date picker作为它的日期组件,现在在编辑模式下打开表单时,在某些情况下,date字段没有值或者它有一个空(“”)值。现在,在这种情况下,如果我的react date picker组件没有找到任何合适的值来解析它,它会在组件上显示“无效日期”,我尝试传递null,或者设置一个检查,如果没有任何日期,或者它是空的,传递未定义或null,我在谷歌上搜索了很多,但没有找到任何合适的答案。我的代码如下所示

我的redux表单中的自定义日期选择器组件:

从“../../../containers/reduxFormFields/formFields”导入{u dateField,};
实际开始日期
实际结束日期

当您传递可为空的日期引用时,您需要确保不必一直尝试转换作为
时刻
对象传递的值,除非您绝对确定日期值将是有效日期格式的有效日期

为此,我要做的是编写一个帮助器类,尝试以目标格式解析日期并返回该格式的日期,或者如果无法解析,则返回
“”

可以使用
moment().isValid()
方法确定传递的日期是否有效,如果无效,则返回空字符串。即:

时刻(this.props.initialValues.actualStartDate).isValid()?this.props.initialValues.actualStartDate:“


如果在类中创建helper方法,则可以调用该方法来放置日期的值,以便在传递可为空的日期引用时,它总是返回日期或

,您需要确保不必一直尝试转换作为
时刻
对象传递的值,除非您绝对确定日期值将是有效日期格式的有效日期

为此,我要做的是编写一个帮助器类,尝试以目标格式解析日期并返回该格式的日期,或者如果无法解析,则返回
“”

可以使用
moment().isValid()
方法确定传递的日期是否有效,如果无效,则返回空字符串。即:

时刻(this.props.initialValues.actualStartDate).isValid()?this.props.initialValues.actualStartDate:“


如果您在类中创建helper方法,您可以调用它来放置日期的值,以便它总是返回日期或

在这里找到一些解决方法,只需将传递日期的代码(来自DB)更改为这样的反应日期组件


defaultValue={moment(this.props.initialValues.actualStartDate)}
在这里找到一些解决方法,只是将我传递日期(来自DB)的代码更改为这样的反应日期组件


defaultValue={moment(this.props.initialValues.actualStartDate)}
使用@material ui/pickers,value={null}有效,但它将在控制台中抛出警告

使用@material ui/pickers,value={null}工作正常,但它会在控制台中发出警告

hi mark感谢您的解决方案,我们将尝试实施并尽快回复您。hi mark很抱歉响应太晚,我尝试了片刻(this.props.initialValues.actualStartDate)。isValid()?this.props.initialValues.actualStartDate:“”但无法成功在日期输入上获得相同的“无效日期”。我没有使用任何助手类,尽管我只是将调用此react date组件的代码放在我的UI中。如果不给它一个正确的日期格式值,Moment将不会返回有效的日期。这就是我要说的全部️ 在我的回答中,你需要验证你试图给出的值,并根据是的标记调整数据,但在我的情况下,如果redux字段没有任何相关值,我必须使字段看起来为空,但我仍然没有找到任何解决方案,如果可以将react date picker字段显示为空,那么我需要向您指出,我必须传递有效的日期格式和日期,否则它将继续返回字段上的无效日期。我试图通过在没有任何值的情况下有条件地呈现一个输入字段来管理它,然后如果用户试图输入任何值(尽管是onclick方法输入字段),则将该字段替换为日期字段。“”的值应使文本框看起来为空,不是吗?hi-mark感谢您的解决方案,我们将尝试实施并尽快回复您。hi-mark很抱歉响应太晚,我尝试了片刻(this.props.initialValues.actualStartDate)。isValid()?this.props.initialValues.actualStartDate:“”但无法成功在日期输入上获得相同的“无效日期”。我没有使用任何助手类,尽管我只是将调用此react date组件的代码放在我的UI中。如果不给它一个正确的日期格式值,Moment将不会返回有效的日期。这就是我要说的全部️ 在我的回答中,你需要验证你试图给出的值,并根据是的标记调整数据,但在我的情况下,如果redux字段没有任何相关值,我必须使字段看起来为空,但我仍然没有找到任何解决方案,如果可以将react date picker字段显示为空,那么我需要向您指出,我必须传递有效的日期格式和日期,否则它将继续返回字段上的无效日期。我试图通过有条件地呈现一个输入字段(如果没有任何值)来管理它,然后用日期字段(如果有)替换该字段