日付コンポーネントとして 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つの別々のコンポーネントがあります。どんな助けもかなりのものです。