CODEWITHSUNDEEP
material-uiredux-form
Pragya Gupta
Pragya Gupta

Reputation: 33

DatePicker (material-ui-picker) onChange unable to pass the value to redux-form onChange event

Integrating DatePicker from material-ui-picker with redux-form.

DatePicker onChange is not able to pass the current value to the onChange of redux-form, code below for reference

helper.js=>>> DatePicker Wrapper

export const DatePickerField = ({
  label,
  input: { onChange, value, name }, 
  meta: { error, form }, 
  minDate,
  maxDate,
  dispatch  
}) => (
    <DatePicker      
      name={name}      
      label={label}
      value={value}
      helperText={error}
      minDate={minDate}
      maxDate={maxDate}
      error={Boolean(error)}
      onChange={onChange}     
      onError={(_, error) =>
        dispatch(formActions.stopSubmit(form, { [name]: error }))
      }
      disablePast      
      format={'dd.MM.yyyy'}
    />
  )

component.js =>> Redux-form component

import { DatePickerField } from 'utils/helper'

     <Field
        name={endDate}        
        component={DatePickerField}       
        onChange={value =>
          store.dispatch(maxDateChange(value))
        }       
      />

Expected Result : =====================

action @@redux-form/CHANGE
meta: {…}, payload: Sat Jan 19 2019 00:00:00 GMT+0200 (Eastern European Standard Time)}

action     {type: "@@invoice/MAX_DATE_CHANGE", value: Sat Jan 19 2019 00:00:00 GMT+0200 (Eastern European Standard Time)}

Actual Result : =======================

action @@invoice/MAX_DATE_CHANGE
value: {preventDefault: ƒ} <--value should be DatePicker current value.


action {type: "@@redux-form/CHANGE", meta: {…}, 
payload: Sat Jan 19 2019 15:49:00 GMT+0200 (Eastern European Standard Time)}

Upvotes: 3

Views: 4549

Answers (1)

Erik R.
Erik R.

Reputation: 7272

If you look at the docs for Field onChange, you'll see that the first parameter is the event, the second is the value. Also, that will be called before the @@redux-form/CHANGE event is dispatched, as it allows that event to be cancelled.

Upvotes: 2

Related Questions