Date Picker: The value/defaultValue of DatePicker or MonthPicker must be a moment object after `[email protected]`

Problem Description:

It’s such a mess. I
’m currently working on a back-end management project, using ancestral code, React+ts+antd. It
’s better to use vue for back-end management.
That’s okay. The version of antd used is 3.xxx. Now the official website has been updated to 5. The .xx version.
Oh, when I first took over the project, I upgraded antd first
. A lot of errors were reported. How dare I change this? I didn’t have so much time,
so I rolled back to the 3.xx version. The version difference was still the same. very big

The problem we encounter now is that when adding data to a date picker, we select it directly. When editing and viewing data, we need to directly assign a value to the date picker. The data format returned by the backend is 2023-12-29. Like this, an error is reported:

Translation: The value/defaultValue of DatePicker or MonthPicker must be the moment object behind '[email protected]'

Datepicker only supports moment type, and the data obtained by the form is of string type, causing an error.

Solution

Install moment

npm i moment --save-dev

import moment from 'moment'

this.props.getFundNoticeDetail(record.id).then(res => {
    
    
      if (res.code === 0) {
    
    
				const reportDateMoment = moment(res.data.reportDate, 'YYYY-MM-DD')
        this.setState({
    
    
          rowData: {
    
    
			...res.data,
			reportDate: reportDateMoment
		  },
          modalVisible: true,
          onlyRead: true,
          title: '查看基金公告',
        })
      }
    })

It cannot be directly assigned to a string. It must be wrapped with moment.

Okay, I thought that was it, but I didn’t expect that when I tested it,
the assignment was fine, but now it doesn’t work when I select the date.
The original code is like this:

modified to:

Done! ! ! ! !