Moment or material ui datepicker object - interfering with formData submissions as a date string

Question

I am working on a java spring application.

I have material ui date picker - wrapped around a formik field.

https://mui.com/x/api/date-pickers/date-picker/

• date field

.

import React, { Component } from 'react';    
//text

import TextField from '@mui/material/TextField';

//date
import moment from 'moment';
//import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';
//import DateFnsUtils from "@date-io/date-fns";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

class DateField extends Component {
    constructor(props, context) {
      super(props, context);
    }

    render() {
      return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePicker
            label={this.props.item.label}
            disablePast={this.props.item.disablePast}
            disableFuture={this.props.item.disableFuture}
            minDate={moment(this.props.item.minDate)}
            maxDate={moment(this.props.item.maxDate)}
            formatDate={(date) => moment(date).format('DD-MM-YYYY').toString()}
            value={this.props.field.value? moment(this.props.field.value).format('YYYY-MM-DD'): moment().format('YYYY-MM-DD')}
            {...this.props.field}
            onChange={(value) => {
              this.props.form.setFieldValue(this.props.name, value);
              this.props.onHandle(this.props.name, value);
            }}
            renderInput={(params) => {
                return (<TextField {...params} name={this.props.name} />)
            }}
          />
        </LocalizationProvider>
      )
    }
}

export default DateField

.

and it looks like this

in the formframework I initialize it like this

when I submit the data and wrap it into a formData function --- I notice that it detects it as an object -- possibly a material ui date object? I am unable to check the typeof this -- as I was trying to see if it was a .isMoment - but its not -- it has a strange syntax and I am unsure how to detect it as a date to make the appropriate code change to a string -- or/and - how to change the datepicker itself to return a string or a moment object?

can see a moment object looks different -- what is the best approach here?

also - should I have the backend acquire this variable as a String, Date or what? Sometimes its a string other times a weird object.

references

How to convert moment date to a string and remove the moment object

JavaScript instanceof and moment.js

How to test if a variable is a Moment.js object?

How to get Material-UI Date Picker value

Answer 1

The solution to this was to detect data.$d -- being defined.

---

export function buildFormData(formData, data, parentKey) {
  if(data.$d){
    data = moment(data).format('YYYY-MM-DD');
  }

  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
    Object.keys(data).forEach(key => {


      if(data[key] instanceof File){
        buildFormData(formData, data[key], parentKey ? `${parentKey}` : key);
      } else {
        buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
      }

    });
  } else {
    const value = data == null ? '' : data;

    formData.append(parentKey, value);
  }
}