Question

我有一个redux表单，它使用react-date-picker作为日期组件，现在在编辑模式下打开表单，在某些情况下，日期字段没有值或者有空白（“” ）价值。现在在这种情况下，如果我的react-date-picker组件找不到任何合适的值来解析它在组件上显示“无效日期”，我尝试传递null，或者设置检查是否没有任何日期或者是否它是空白传递undefined或null，我google了很多但没有找到任何合适的答案。我的代码看起来像这样

我的redux格式的自定义日期选择器组件：

import { _dateField, } from '../../../containers/reduxFormFields/formFields';

<Row>
										<Col md={6}>
											<FormGroup>
												<ControlLabel bsClass="">Actual Start Date</ControlLabel>
												<div className="dateTimeSdiv">
													<Field name="actualStartDate" component={_dateField} className="form-control" formType="edit" defaultValue={moment(this.props.initialValues.actualStartDate)} />
												</div>
											</FormGroup>
										</Col>
										<Col md={6}>
											<FormGroup>
												<ControlLabel bsClass="">Actual End Date</ControlLabel>
												<div className="dateTimeSdiv">
													<Field name="actualEndDate" component={_dateField} className="form-control" formType="edit" defaultValue={moment(this.props.initialValues.actualEndDate)} />
												</div>
											</FormGroup>
										</Col>
									</Row>

我的日期选择器组件如下所示：

export const _dateField = ({ input, placeholder, defaultValue, className, formType,disabledValue, meta: { touched, error } }) => {console.log('values');console.log(defaultValue)
switch (formType) {
		case "edit":
			return (
				<div className="dateTimeSdiv">
					<DateField className={(touched && error) ? className + " error" : className} expandOnFocus={false} dateFormat="YYYY-MM-DD HH:mm:ss" updateOnDateClick forceValidDate defaultValue={defaultValue}  minDate={moment()} disabled = {disabledValue}>
						<DatePicker {...input} selected={input.value ? moment(input.value) : null} navigation locale="en" forceValidDate highlightWeekends highlightToday weekNumbers={false} weekStartDay={1} todayButton={false}></DatePicker>
					</DateField>
					{touched && error && <span> {error} </span>}
				</div>
			);
		case "create":
			return (
				<div className="dateTimeSdiv">
					<DateField className={(touched && error) ? className + " error" : className} expandOnFocus={false} dateFormat="YYYY-MM-DD HH:mm:ss" updateOnDateClick forceValidDate defaultValue={moment()}  minDate={moment()} disabled = {disabledValue}>
						<DatePicker {...input} selected={input.value ? moment(input.value) : null} navigation locale="en" forceValidDate highlightWeekends highlightToday weekNumbers={false} weekStartDay={1} todayButton={false}></DatePicker>
					</DateField>
					{touched && error && <span> {error} </span>}
				</div>
			);
	}
};

有两个seprate组件，我用它来编辑和创建每个组件。任何帮助都会很明显。

Answer 1

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

我为此做的是编写一个帮助程序类，尝试以目标格式解析日期并以该格式返回日期，或者如果无法解析则返回""。

您可以使用moment(<value here>).isValid()方法确定您传递的日期是否为有效日期，如果不是，则返回空字符串。即：

moment(this.props.initialValues.actualStartDate).isValid() ? this.props.initialValues.actualStartDate : ""

如果您在班级中创建了辅助方法，则可以调用该方法来放置日期的值，以便它始终返回日期或""。

Answer 2

在这里找到一些解决方法，只需更改我的代码，我将日期（来自数据库）传递给react-date-component，就像这样

＆＃13;

defaultValue = {moment(this.props.initialValues.actualStartDate)}

＆＃13;

现在将代码更改为

＆＃13;

 defaultValue = {this.props.initialValues.actualStartDate}

＆＃13;

react-date-picker的defaultValue属性没有将该值作为时刻对象，而是仅在作为字符串传递时起作用。

Answer 3

使用@ material-ui / pickers，value = {null}起作用，但是它将在控制台中引发警告

如何为react-date-picker设置一个空的初始值？

3 个答案: