javascript - 带有 react-redux 的日期选择器无法正常工作“预期的日期实例”

Question

我正在使用 redux-form react-datepicker 和 moment 创建一个表单，但日期格式出现错误。

它在日期选择器中显示多个错误和无效输入字段消息

这是我的表单实用程序：

import React from 'react'
import { Form, Label } from 'semantic-ui-react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import moment from 'moment'

const DateInput = ({input, width, placeholder, meta: {touched, error}, ...rest}) => {
    return(
        <Form.Field error={touched && !!error} width={width}>
            <DatePicker 
                {...rest}
                placeholderText={placeholder}
                selected={input.value ? moment(input.value) : null}
                onChange={input.onChange}
            />
            {touched && error && <Label basic color="red">{error}</Label>}
        </Form.Field>
    )
}

export default DateInput

并且组件导入使用 redux-form 字段

<Field
 name="date"
 type="text"
 component={DateInput}
 dateFormat="YYYY/MM/DD HH:mm"
 timeFormat="HH:mm"
 showTimeSelect
 placeholder="Date and time of event"
/>

我已经使用 moment().format() 在 datepicker 字段上显示日期，但随后显示此错误：

提供给的预期实例的selected类型无效道具。MomentDatePickerDate

标签： javascriptreactjsreact-reduxmomentjs

Answer 1

在定义的 propTypes 中，需要更改

selected: PropTypes.instanceOf(Date)

至

selected: PropTypes.instanceOf(Moment)