1

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

我的 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>
			);
	}
};

我使用两个单独的组件进行编辑和创建。任何帮助都将是可观的。

4

3 回答 3

0

使用@material-ui/pickers，value={null} 工作，但它会在控制台中抛出警告

于 2019-07-11T01:58:23.230 回答
0

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

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

现在将代码更改为

 defaultValue = {this.props.initialValues.actualStartDate}

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

于 2017-11-13T13:28:02.543 回答
0

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

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

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

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

如果你在你的类中创建辅助方法，你可以调用它来放置日期的值，这样它总是返回日期或"".

于 2017-10-30T13:57:03.827 回答