Search code examples
javascriptreactjsreduxredux-formreact-redux-form

React-Redux-Form - Integrating date picker

I'm new to redux form, so sorry if i use the wrong terminology.

I've been using react-redux-form to handle my redux and backend communication. https://github.com/davidkpiano/react-redux-form

Recently I was asked to implement a datepicker. Our initial choice is to use Airbnb datepicker, however we can't send the captured value into the backend.

Maybe it's easier to show my code:

on return of render()- 

<Form model="trip" onSubmit={(val) => this.handleSubmit(val)}>
    <Control.select model=".city">
        {getCities}
    </Control.select>

    <Control
        model=".travelDate"
        component={SingleDatePicker}
        mapProps={{
            onDateChange: props => props.onChange,
            onFocusChange: props => props.onChange,
            date: props => props.modelValue
        }}
    />
    <div>
        <Button name="Lets Begin!" buttonType="primary" />
    </div>
</Form>

Well I've been doing a bit of searching, and it react-datepicker by airbnb has a bit of an issue with react-redux form. If anyone know any better plug in worth using. Please let me know

Thanks for your help,

Solution

  • form.js

    <div className="md-grid"><p className="md-cell--3 subheading">Valid until</p>
      <div>
          <Control
              model='.valid_until'
              component={DateField}
              mapProps={{
                  value: (props) =>{return props.viewValue}
                }}
                />
      </div>
  </div>

    Datefield.js

    import React, {PureComponent, PropTypes} from "react";
import Datetime from 'react-datetime/DateTime';
require('react-datetime');


const DateComponent = (props)=> {

    return (
        <Datetime defaultValue={new Date()}
        value={props.value}
        {...props} 
        style={{width:'150%'}}/>
    );

};

export default DateComponent