react-dates SingleDatePicker in redux-form v5

Question

I am trying to use SingleDatePicker in redux-form. Here is the render method in my form

render() {
    const {fields: {date}, handleSubmit} = this.props;

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <SingleDatePicker
                    {...date}
                    id="date_input"
                    selected={date.value ? moment(date.value, 'DD/MM/YYYY') : moment()}
                    onChange={param => date.onChange(param)} />
            </div>

            <button type="submit"><Link to="/Step1">Submit</Link></button>
        </form>
    );
}

and at the end of this form component

export default reduxForm({
form: 'thisForm',
fields: ['date']})(thisForm);

what I got on the page is a static input like this

when I click it, nothing happened. No highlight, no dropdown calendar like this .

Any idea? Any suggestion to handle datepicker like this in redux-form?

Answer 1

Try creating a hidden field for redux-form and then wrapping the date selector so that it sets the hidden form field's value:

// Wrap the Airbnb component so that it conforms to the property API expected by redux-form
// See: https://github.com/erikras/redux-form/issues/1860
// Also, see: https://github.com/airbnb/react-dates/blob/master/examples/SingleDatePickerWrapper.jsx
class DateField extends Component {
  // The props are supplied via redux-form's <Field /> component
  static propTypes = {
    autoFocus: PropTypes.bool.isRequired,
    input: PropTypes.shape({
      value: PropTypes.string,
      onChange: PropTypes.func.isRequired,
      onFocus: PropTypes.func.isRequired,
      onBlur: PropTypes.func.isRequired
    }).isRequired
  }

  constructor (props) {
    super(props)
    const { value } = this.props.input
    this.state = {
      date: (!value || value === '') ? null : moment(value),
      focused: this.props.autoFocus
    }
  }

  // Use empty value instead of null to ensure it's treated as a controlled component
  getValueAsString = date => (date ? date.toISOString() : '')

  handleDateChange = (date, foo) => {
    this.setState({ date }, () => {
      const dateStr = this.getValueAsString(this.state.date)
      this.props.input.onChange(dateStr)
    })
  }

  handleFocusChange = (e) => {
    this.setState({ focused: e.focused }, () => {
      const date = this.state.date
      const dateStr = this.getValueAsString(date)
      if (e.focused) {
        this.props.input.onFocus(dateStr)
      } else {
        this.props.input.onBlur(dateStr)
      }
    })
  }

  renderHiddenField = field => (
    <input {...field.input} type={'hidden'} />
  )

  render () {
    // eslint-disable-next-line
    const { name, input, meta, ...rest } = this.props
    const dateStr = this.getValueAsString(this.state.date)
    return (
      <div>
        <Field
          {...this.props}
          name={`_hidden_${input.name}`}
          value={dateStr}
          component={this.renderHiddenField}
        />
        <SingleDatePicker
          id={`_wrapped_${input.name}`}
          date={this.state.date}
          focused={this.state.focused}
          onDateChange={this.handleDateChange}
          onFocusChange={this.handleFocusChange}
          {...rest}
        />
      </div>
    )
  }
}

Answer 2

try-> this.state.focused.focused

<SingleDatePicker
  date={this.state.createdAt}
  focused={this.state.calanderFocused.focused}
  onDateChange={this.onDateChange}
  onFocusChange={this.onFocusChange}
/>