0
私は、date-pickerを日付コンポーネントとして使用するreduxフォームを持っています。これは、編集モードでフォームを開くときに、日付フィールドに値がないか、空白（ ""）値。この場合、私のreact-date-pickerコンポーネントが解析する適切な値が見つからない場合、コンポーネントに無効な日付が表示されます。nullを渡すか、日付がないかチェックするかチェックしますそれは空白のパスが未定義かヌルです、私はそれをたくさんグーグルしましたが、適切な答えは見つかりませんでした。私のコードは私のReduxの形式で、このreact-date-pickerの空の初期値を設定する方法は？
私のカスタム日付ピッカーコンポーネントのようになります。
import { _dateField, } from '../../../containers/reduxFormFields/formFields';
<Row>
\t \t \t \t \t \t \t \t \t \t <Col md={6}>
\t \t \t \t \t \t \t \t \t \t \t <FormGroup>
\t \t \t \t \t \t \t \t \t \t \t \t <ControlLabel bsClass="">Actual Start Date</ControlLabel>
\t \t \t \t \t \t \t \t \t \t \t \t <div className="dateTimeSdiv">
\t \t \t \t \t \t \t \t \t \t \t \t \t <Field name="actualStartDate" component={_dateField} className="form-control" formType="edit" defaultValue={moment(this.props.initialValues.actualStartDate)} />
\t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t </FormGroup>
\t \t \t \t \t \t \t \t \t \t </Col>
\t \t \t \t \t \t \t \t \t \t <Col md={6}>
\t \t \t \t \t \t \t \t \t \t \t <FormGroup>
\t \t \t \t \t \t \t \t \t \t \t \t <ControlLabel bsClass="">Actual End Date</ControlLabel>
\t \t \t \t \t \t \t \t \t \t \t \t <div className="dateTimeSdiv">
\t \t \t \t \t \t \t \t \t \t \t \t \t <Field name="actualEndDate" component={_dateField} className="form-control" formType="edit" defaultValue={moment(this.props.initialValues.actualEndDate)} />
\t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t </FormGroup>
\t \t \t \t \t \t \t \t \t \t </Col>
\t \t \t \t \t \t \t \t \t </Row>と私の日付ピッカーコンポーネントは次のようになります。
export const _dateField = ({ input, placeholder, defaultValue, className, formType,disabledValue, meta: { touched, error } }) => {console.log('values');console.log(defaultValue)
switch (formType) {
\t \t case "edit":
\t \t \t return (
\t \t \t \t <div className="dateTimeSdiv">
\t \t \t \t \t <DateField className={(touched && error) ? className + " error" : className} expandOnFocus={false} dateFormat="YYYY-MM-DD HH:mm:ss" updateOnDateClick forceValidDate defaultValue={defaultValue} minDate={moment()} disabled = {disabledValue}>
\t \t \t \t \t \t <DatePicker {...input} selected={input.value ? moment(input.value) : null} navigation locale="en" forceValidDate highlightWeekends highlightToday weekNumbers={false} weekStartDay={1} todayButton={false}></DatePicker>
\t \t \t \t \t </DateField>
\t \t \t \t \t {touched && error && <span> {error} </span>}
\t \t \t \t </div>
\t \t \t);
\t \t case "create":
\t \t \t return (
\t \t \t \t <div className="dateTimeSdiv">
\t \t \t \t \t <DateField className={(touched && error) ? className + " error" : className} expandOnFocus={false} dateFormat="YYYY-MM-DD HH:mm:ss" updateOnDateClick forceValidDate defaultValue={moment()} minDate={moment()} disabled = {disabledValue}>
\t \t \t \t \t \t <DatePicker {...input} selected={input.value ? moment(input.value) : null} navigation locale="en" forceValidDate highlightWeekends highlightToday weekNumbers={false} weekStartDay={1} todayButton={false}></DatePicker>
\t \t \t \t \t </DateField>
\t \t \t \t \t {touched && error && <span> {error} </span>}
\t \t \t \t </div>
\t \t \t);
\t }
};編集に使用している2つのseprateコンポーネントがあり、それぞれから作成します。 何か助けが受け入れられるでしょう。
解決のためのhiマークありがとうございました。 –
ハイマーク申し訳ありませんが、私は瞬間（this.props.initialValues.actualStartDate）.isValid（）を試してみましたか？ this.props.initialValues.actualStartDate： ""しかし、日付入力時に同じ "無効な日付"を得ることはできませんでした。私はヘルパークラスを使用していませんでしたが、私はこのリアクションデートコンポーネントをUI内のどこから呼び出すかを指定しました。 –
適切な日付書式の値を指定しないと、モーメントは有効な日付を返しません。それが私の答えで作ろうとしていた全体のポイントです。あなたは瞬間を与えようとする価値を検証し、それに応じてデータを調整する必要があります。 –