Issues using react-bootstrap-daterangepicker with redux-form

[TeyimPila]

Hello, I am trying to make use of this library with redux form but when I select a date, the value is not submitted at part of the form fields. Is there any guide that I can use to implement this with redux form, please. Here is my attempt...

// form.js
import DateRangePicker from '../../_components/RangePicker'
...
  <Field
            name="daterange"
            type="text"
            component={DateRangePicker}/>

//RangePicker.js

    import React from 'react';
import DatetimeRangePicker from 'react-bootstrap-daterangepicker';
import moment from 'moment';
import 'bootstrap-daterangepicker/daterangepicker.css';


import {
    Button, Col, FormControl, FormGroup,
} from 'react-bootstrap';

class PredefinedRanges extends React.Component {

    constructor(props) {
        super(props);

        this.handleEvent = this.handleEvent.bind(this);

        this.state = {
            startDate: moment().subtract(29, 'days'),
            endDate: moment(),
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            },
        };
    }


    handleEvent(event, picker) {
        this.setState({
            startDate: picker.startDate,
            endDate: picker.endDate,
        });
    }

    render() {

        const {placeHolder, options, input, children, meta: {pristine, touched, error, warning}, ...rest} = this.props;

        const getValidationState = () => {
            return error ? 'error' : warning ? 'warning' : 'success'
        };

        let start = this.state.startDate.format('MMMM D, YYYY');
        let end = this.state.endDate.format('MMMM D, YYYY');
        let label = start + ' - ' + end;
        if (start === end) {
            label = start;
        }

        console.log('This is the date picker', input);

        return (
            <div className="form-group">
                <div className="col-md-4">
                    <DatetimeRangePicker
                        startDate={this.state.startDate}
                        endDate={this.state.endDate}
                        ranges={this.state.ranges}
                        onEvent={(e, p) => input.onChange(e, p)}>

                        <FormGroup className="show-grid row"
                                   controlId="formBasicText"
                                   validationState={getValidationState()}>

                            <Col md={5}>
                                <FormControl
                                    componentClass="text"
                                    {...input}
                                    {...rest}
                                    children={children}>
                                    {label}
                                </FormControl>
                            </Col>
                        </FormGroup>
                    </DatetimeRangePicker>
                </div>
            </div>
        );
    }

}

export default PredefinedRanges;

[skratchdot]

@TeyimPila - In all honesty- I haven't had time to maintain this lib, and there are better "pure react" date pickers out there- so I might try a different date picker lib.

With that said, there's probably a way to use redux-form's action creators to update the redux form state:

https://redux-form.com/7.3.0/docs/api/actioncreators.md/#-code-change-form-string-field-string-value-any-code-

So in your handleEvent() code for the date picker, doing something like:

handleEvent(event, picker) {
  dispatch(change('my-redux-form', 'startDate', picker.startDate));
  dispatch(change('my-redux-form', 'endDate', picker.endDate));
}

That's probably an anti-pattern, and not the best way to use redux-form, but I have written user-scripts that do similar things when I want to "auto-fill" a redux-form.

[skratchdot]

closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater