1

日付コンポーネントとして react-date-picker を使用する redux フォームがあります。編集モードでフォームを開くと、場合によっては日付フィールドに値がないか、空白 (" ") 値があります。この場合、react-date-picker コンポーネントが解析する適切な値を見つけられない場合、コンポーネントに「無効な日付」が表示されます。null を渡すか、日付がないかどうかチェックを設定してみました。それはブランクパス未定義または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>
			);
	}
};

それぞれから編集および作成するために使用している2つの別々のコンポーネントがあります。どんな助けもかなりのものです。

4

3 に答える 3