CODEWITHSUNDEEP
reactjsmaterial-uiredux-form
ppu
ppu

Reputation: 66

material-ui Date Picker saves empty value as Date(0) in Redux Form

I have a Redux Form which is using the material-ui Date Picker to save dates. If someone doesn't pick a date and submits the form anyway, the date saves as 1970-01-02. Unfortunately the documentation didn't seem to include any props for handling that and I can't solve it via validation - these fields must be optional.

Is there any option to force the component not to input Date(0) when the value hasn't been given? Or should I use another DatePicker tool? We're using material-ui v.0.19.4. I've experimented with using null state which would only alter on change, but it didn't help.

That's how the Fields look.

      <Field
        name="endOfPartnership"
        type="text"
        component={DatePicker}
        className={css.fullWidth}
        floatingLabelFocusStyle={styles.floatingLabelColor}
        underlineFocusStyle={styles.floatingLabelColor}
        floatingLabelText={intl.formatMessage(defineMessages.endOfPartnership)}
        fullWidth
        formatDate={formatDate}
        minDate={minDate}
      />

Upvotes: 1

Views: 3255

Answers (2)

ppu
ppu

Reputation: 66

It appeared there was a problem with a function parsing dates to string.

Someone had a problem with the date conversion and made a very ugly workaround. We switched to moment.js which allowed us to avoid the previous problem and I can confirm that it works perfectly now when no input is provided => the materialUI datepicker works as it should.

Thank you Christopher!

Upvotes: 0

christopher_pk
christopher_pk

Reputation: 651

I found where the behavior is defined, just for your reference. From their source code.

https://github.com/mui-org/material-ui/blob/v0.x/src/DatePicker/DatePicker.js

There is this line.

value={this.state.date ? formatDate(this.state.date)

Where formatDate is,

  formatDate = (date) => {
    if (this.props.locale) {
      const DateTimeFormat = this.props.DateTimeFormat || dateTimeFormat;
      return new DateTimeFormat(this.props.locale, {
        day: 'numeric',
        month: 'numeric',
        year: 'numeric',
      }).format(date);
    } else {
      return formatIso(date);
    }
  };

I guess this is why the date is always "well formatted".

Upvotes: 1

Related Questions