Shulou(Shulou.com)06/02 Report--

This article "Ant Design DatePicker error problem how to solve" most people do not understand the knowledge points of the article, so Xiaobian summarized the following content for you, detailed content, clear steps, has a certain reference value, I hope you can read this article to gain something, let's take a look at this article "Ant Design DatePicker error problem how to solve" article bar.

Ant Design By design, a control of a certain type can only accept values of a certain type. For example, the value of Input is of type string, the value of InputNumber is of type number, and the value of DatePicker is of type moment.

This design is understandable, and also takes into account the date format inconsistent conversion problem, and even replace the date library problem. However, there are some inconvenient situations in actual use, and the date data returned by the server is basically a string type. The official recommendation is to process the date data returned by the server first and convert it to moment type. However, this undoubtedly increases the amount of code, resulting in inconvenient use.

Github has an issue that discusses this problem: 4.0.0 form component uses initialValues to initialize data. When it contains "date" data, DatePicker component reports error "date.clone is not a function"

The questioner in the post finally solved the problem with a custom component. This is a good idea, here is a more complete custom component code. This requires that the date data returned by the server be in a standard format that can be processed directly by moment.

import React, {FC} from 'react';import {DatePicker} from 'antd';import {DatePickerProps} from "antd/es/date-picker";import moment from "moment";const DatePicker2: FC= props => { const {value, defaultValue, ... rest} = props; const dateValue = value && typeof value === 'string' ? moment(value) : value; const defaultDateValue = defaultValue && typeof defaultValue === 'string' ? moment(defaultValue) : defaultValue; return;}; export default DatePicker2 The above is about "Ant Design DatePicker error problem how to solve" the content of this article, I believe everyone has a certain understanding, I hope the content shared by Xiaobian is helpful to everyone, if you want to know more related knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.