React MaterialUi Date Picker throws RangeError Invalid time value

Question

I've tried about everything I could find on the forums etc, re this error, but no success. Most solutions seem to be

format="DD/MM/YYYY HH:mm" 

or Moment (being locale driven)

I return the selected date into a chip which displays fine, but the 'RangeError.Invalid time value' issue persists into the chip after the correct selected date is rendered in it.

const [effectiveSelectedDate, setEffSelectedDate] = useState();
const handleEffDateChange = (date,name) =>{
        setEffSelectedDate(date);
}

export const makeColumns = (columns, language, rawFilters, filters, format_functions) => {
    return columns.map((item, i) => {
        if (data.className.search("date_time") > -1) {
            logic:   (..........                         ),
            display: (filterList, onChange, index, column) => (
                <MuiPickersUtilsProvider
                        utils={DateFnsUtils}
                        locale={localeMap[i18next.language]} >

                    <KeyboardDatePicker    
                        fullWidth
                        variant='inline'
                        placeholder='yyyy-MM-dd'
                        format='yyyy-MM-dd'
                        margin='normal'
                        id='date-picker-inline'
                        name='effectiveDate'
                        value={effectiveSelectedDate}
                        onChange={handleEffDateChange}
                        KeyboardButtonProps={{ 'aria-label': 'change date',  }}
                    />
                </MuiPickersUtilsProvider>
             )
       }
    }
);

What am I missing? Thanks

Answer 1

try this one

const [effectiveSelectedDate, setEffSelectedDate] = useState();
const handleEffDateChange = (date,name) =>{
        setEffSelectedDate(date);
    }
<MuiPickersUtilsProvider utils={DateFnsUtils}>
           <KeyboardDatePicker
               fullWidth
               variant='inline'
               placeholder='yyyy-MM-dd'
               format='yyyy-MM-dd'
               margin='normal'
               id='date-picker-inline'
               name='effectiveDate'
               value={effectiveSelectedDate}
               onChange={handleEffDateChange}
               KeyboardButtonProps={{
                  'aria-label': 'change date',
                   }}
                       />
  </MuiPickersUtilsProvider>