【react antd】DatePicker组件报错：date.clone is not a function...

---

什么时候会报错

说话先说版本：

"antd": "^4.23.6"
1

写个应用demo来看下：

该组件获取值，是不需要通过onChange的，所以此处注释掉了。

import React from 'react';
import './index.css';
import { DatePicker, Space } from 'antd';

const DateShow = () => {

  // const onChange = (value, dateString) => {
  //   console.log('Selected Time: ', value);
  //   console.log('Formatted Selected Time: ', dateString);
  // };
  const onOk = (value) => {
    console.log('onOk: ', value);
  };
  
  return <Space>
    <DatePicker showTime={{format: 'MM-DD HH:mm'}} onOk={onOk} />
  </Space>
}

export default DateShow;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

此时，选择时间，应用组件，都是正常的，没有异常。

现在，修改一下demo，通过点击事件和hook，给日期设置一个值：

import React, { useState } from 'react';
import './index.css';
import { DatePicker, Space, Button } from 'antd';
// 中文化
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

const DateShow = () => {

  const [date, setDate] = useState('');

  // const onChange = (value, dateString) => {
  //   console.log('Selected Time: ', value);
  //   console.log('Formatted Selected Time: ', dateString);
  // };
  const onOk = (value) => {
    console.log('onOk: ', value);
  };
  
  return <Space direction="vertical">
    <DatePicker
      locale={locale}
      value={date}
      showTime={{ format: 'MM-DD HH:mm' }}
      onOk={onOk}
    />
    {/*点击设置一个时间值*/}
    <Button type='primary' onClick={() => {setDate('2022-11-01 11:17:34')}}>点击设置时间</Button>
  </Space>
}

export default DateShow;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

好了，报错了：Uncaught TypeError: date.clone is not a function

总结一下，什么时候会出现该报错呢：

1. 在DatePicker中使用了value值
2. 给value设置一个字符串时间
1
2

---

如何解决

根据上面的总结，就有两种解决办法：

1. 在非必要时，不在DatePicker上使用value。也不通过value去设置日期和时间。
一般情况下，通过onOk的确定事件，就足够获取到日期。
但是，有时候我们需要设置一个初始值，或者通过value更改日期的值，
这时候该方法就不能用了，因为此时必须要用value了。
1
2
3
4

2. value值不支持字符串。value只支持moment格式的日期。
1

引入moment并修改demo如下：

import React, { useState } from 'react';
import './index.css';
import { DatePicker, Space, Button } from 'antd';
// 中文化
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';

const DateShow = () => {

  const [date, setDate] = useState('');

  // const onChange = (value, dateString) => {
  //   console.log('Selected Time: ', value);
  //   console.log('Formatted Selected Time: ', dateString);
  // };
  const onOk = (value) => {
    console.log('onOk: ', value);
  };
  
  return <Space direction="vertical">
    <DatePicker
      locale={locale}
      value={date}
      showTime={{ format: 'MM-DD HH:mm' }}
      onOk={onOk}
    />
    <Button type='primary' onClick={() => {setDate(moment(1667273410735))}}>点击设置时间</Button>
  </Space>
}

export default DateShow;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

此时再点击按钮，就可以正常设置时间了：

上面的示例中，moment里写的是时间戳，当然，在moment里写时间字符串也是没问题的，

因为moment会把字符串转换成moment格式：

import React, { useState } from 'react';
import './index.css';
import { DatePicker, Space, Button } from 'antd';
// 中文化
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';

const DateShow = () => {

  const [date, setDate] = useState('');

  // const onChange = (value, dateString) => {
  //   console.log('Selected Time: ', value);
  //   console.log('Formatted Selected Time: ', dateString);
  // };
  const onOk = (value) => {
    console.log('onOk: ', value);
  };
  
  return <Space direction="vertical">
    <DatePicker
      locale={locale}
      value={date}
      showTime={{ format: 'MM-DD HH:mm' }}
      onOk={onOk}
    />
    <Button type='primary' onClick={() => {setDate(moment('2022-11-01 11:36:22'))}}>点击设置时间</Button>
  </Space>
}

export default DateShow;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

点击一下，也是没问题的：

---

问题解决，over

---

参考文档：

https://blog.csdn.net/qq_40138556/article/details/113562816