Redux-form-material-ui: Prop "format" for TimePicker component interfere with Field components prop

Created on 14 Oct 2016  路  4Comments  路  Source: erikras/redux-form-material-ui

To set the format for the TimePicker we use the _format_ prop like this
<TimePicker format="24hr" />

How to set prop format when using the Field component?

<Field name="some_name" component={TimePicker} format="24hr" />
This is not working because the Field component already has a prop called _format_.

Most helpful comment

below code works fine

              <Field
                name="at"
                component={TimePicker}
                format={null}
                props={{format: "24hr"}}
              />

All 4 comments

Not an ideal solution, but you can introduce a new prop (let's say timeFormat) that gets converted to format in mapProps:

createComponent(
  TimePicker,
  ({
    input: {
      onBlur, // eslint-disable-line no-unused-vars
      onChange,
      ...inputProps
    },
    timeFormat,
    ...props
  }) => ({
    ...inputProps,
    ...mapError(props),
    format: timeFormat,
    onChange: (event, value) => onChange(value),
    value: inputProps.value !== '' ? inputProps.value : null
  })
)

Where I have also added the last line as per https://github.com/erikras/redux-form-material-ui/issues/37

So now you can write:

<Field name="some_name"
       component={TimePicker}
       timeFormat="24hr" />

any news on this?

below code works fine

              <Field
                name="at"
                component={TimePicker}
                format={null}
                props={{format: "24hr"}}
              />

Thanks @tikitikipoo For the help :) Closing this feel free to open if still facing an issue.

Was this page helpful?
0 / 5 - 0 ratings