form.setFieldsValue 之后再去选择日期出错clone.weekday is not a function #26190

KouSum · 2020-08-13T09:37:09Z

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

[https://ant.design/docs/react/replace-moment-cn 按照此教程替换 Moment.js为dayjs ](https://ant.design/docs/react/replace-moment-cn 按照此教程替换 Moment.js为dayjs )

Steps to reproduce

按照教程替换 Moment.js为dayjs form中使用RangePicker form.setFieldsValue 之后再去选择日期出错clone.weekday is not a function

import React, { useState, useEffect } from 'react';
import {
  Form,
  Button,
} from 'antd';
import { DatePicker, Calendar } from '../components';
import format from 'dayjs';


const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;
function Demo(props) {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({
      dates: [format("2020-05-05",dateFormat), format("2020-05-06",dateFormat)],
    });
  }, []);



  const onFinish = values => {
    console.log('Finish:', values);
  };

  function dateChange(a,b,c){
    console.log(a,b,c)
  }

  return (

    <Form form={form} name="statis" layout="inline" onFinish={onFinish}>
      <Form.Item name="dates">
        <RangePicker initialValues={[format('2015-01-01', dateFormat), format('2015-01-01', dateFormat)]} onChange={dateChange} format={dateFormat} />
      </Form.Item>
      <Form.Item>
        <Button
          type="primary"
          htmlType="submit"
          onClick={() => {
            console.log(
              form.getFieldsValue(),
              format('2018-08-08').format('YYYY-MM-DD'),
            );
          }}
        >
          查询
        </Button>
      </Form.Item>
    </Form>
  );
}

export default Demo;

What is expected?

form.setFieldsValue之后可以正常选择日期

What is actually happening?

出错clone.weekday is not a function

Environment	Info
antd	4.5.3
React	16.12.0
System	win10
Browser	谷歌浏览器

部分错误提示
dayjs.js:73

Uncaught TypeError: clone.weekday is not a function
at Object.getWeekDay (dayjs.js:73)
at getWeekStartDate (dateUtil.js:97)
at DateBody (DateBody.js:21)
at renderWithHooks (react-dom.development.js:14803)
at mountIndeterminateComponent (react-dom.development.js:17482)
at beginWork (react-dom.development.js:18596)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)
at performSyncWorkOnRoot (react-dom.development.js:21756)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at discreteUpdates$1 (react-dom.development.js:21893)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)

07akioni · 2020-08-13T12:06:03Z

please provide a codesandbox link

ant-design-bot · 2020-08-13T12:06:11Z

Hello @KouSum. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @KouSum, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击此处创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

KouSum · 2020-08-14T02:33:24Z

重装依赖包后就好了

crownclownwl · 2020-08-14T08:41:03Z

我也遇到这个问题了，回显之后，在编辑就报错

KouSum · 2020-08-14T08:56:11Z

https://codesandbox.io/s/antd-reproduction-template-forked-6qd12?fontsize=14&hidenavigation=1&theme=dark
不知道重现的是否正确，这里是正常的。

G-WangZH · 2020-09-09T05:04:47Z

我也遇到这个问题了，回显之后，在编辑就报错

我yongdayjs时也遇到了，请问解决了吗

victorWuxz · 2020-09-09T08:28:49Z

我也遇到了同样的问题

harshithmullapudi · 2020-09-24T05:44:12Z

4.5.0版本更新打破了dayjs的实现。这似乎适用于4.4.3

Deboracgs · 2020-09-29T18:48:12Z

I have the same problem with datepicker, any update?

crownclownwl · 2020-09-30T00:00:16Z

把项目中的 day.js 改成 moment.js 完美解决，就是 moment.js 太大了

fabiendeborde · 2020-09-30T03:09:31Z

Having the same issue here.
I would be really great if dayjs was better supported and didn't need a "hacky" way to implement it.
(a props passed to the picker would be the easiest way to use it)

hoangmeo · 2020-09-30T03:40:13Z

update lastest version dayjs

Deboracgs · 2020-09-30T08:39:51Z

@crownclownwl moment.js is not recommended to use now, dayjs is the recommended to use

Deboracgs · 2020-09-30T08:40:07Z

@hoangmeo I'm using the lastest version

rohitsahu4 · 2020-10-05T14:35:09Z

found a way to do this.

import weekday from "dayjs/plugin/weekday"
import localeData from "dayjs/plugin/localeData"

dayjs.extend(weekday)
dayjs.extend(localeData)

I guess DatePicker would use these dayjs plugins so you would have to add these plugins yourself.

marian2js · 2020-10-20T20:40:06Z

This is an issue with rc-picker: react-component/picker#123

JemarJones · 2021-01-14T00:31:43Z

The required plugins should probably be listed on that "Replace Moment.js" page IMO

afc163 · 2021-01-14T02:43:35Z

@iamkun Should we update documentation?

iamkun · 2021-01-14T02:56:14Z

@iamkun Should we update documentation?

@afc163 This is because, after 4.5.0, Antd uses moment().weekday which needs an additional Day.js plugin.

I'll update antd-dayjs-webpack-plugin to add the relevant plugin to make it work.

afc163 · 2021-01-14T03:10:03Z

https://ant.design/docs/react/replace-moment-cn should include these additional Day.js plugins.

iamkun · 2021-01-14T03:23:10Z

Correct, and I'll update rc-picker/lib/generate/dayjs as well

iamkun · 2021-01-17T04:46:10Z

After digging this issue, it is actually because there are TWO Day.js package installed in node_modules, one node_modules/dayjs, the other might in node_modules/rc-picker/dayjs, and this is the reason that caused this error.

SOLUTION:

Add dayjs to the dependency to package.json
delete node_modules and package-lock.json
npm install
check and make sure there are only ONE Day.js package installed in node_modules

ref: ant-design/antd-dayjs-webpack-plugin#36

cjfff · 2021-02-07T05:14:10Z

After digging this issue, it is actually because there are TWO Day.js package installed in node_modules, one node_modules/dayjs, the other might in node_modules/rc-picker/dayjs, and this is the reason that caused this error.

SOLUTION:

Add dayjs to the dependency to package.json

delete node_modules and package-lock.json

npm install

check and make sure there are only ONE Day.js package installed in node_modules

ref: ant-design/antd-dayjs-webpack-plugin#36

this solution can resolute my project.

but the dayjs instance maybe not in your node_modules, it could build in another package that it would not the same dayjs and the rc-picker import

PipBoy2000 · 2021-02-08T19:46:40Z

4. check and make sure there are only ONE Day.js package installed in node_modules

Yeah, that isn't working no matter how many times I nuke my package-lock.json and node_modules. The rc-picker always has that dependency:

  "dependencies": {
    "@babel/runtime": "^7.10.1",
    "classnames": "^2.2.1",
    "date-fns": "^2.15.0",
    "dayjs": "^1.8.30",
    "moment": "^2.24.0",
    "rc-trigger": "^5.0.4",
    "rc-util": "^5.4.0",
    "shallowequal": "^1.1.0"
  }

iamkun · 2021-02-09T03:24:27Z

@PipBoy2000 Thanks, fixed in react-component/picker#214

YemreAybey · 2021-02-10T10:07:47Z

I believe we will wait until ant-design update rc-picker version right?

P.S: No we don't. Clearing the lock and node_modules and than installing the packages again solved my problem. Thanks everyone who rised and worked on this issue.

Messiahhh · 2022-06-22T07:21:20Z

After digging this issue, it is actually because there are TWO Day.js package installed in node_modules, one node_modules/dayjs, the other might in node_modules/rc-picker/dayjs, and this is the reason that caused this error.

SOLUTION:

Add dayjs to the dependency to package.json

delete node_modules and package-lock.json

npm install

check and make sure there are only ONE Day.js package installed in node_modules

ref: ant-design/antd-dayjs-webpack-plugin#36

Solved my problem

07akioni added the 🤔 Need Reproduce We cannot reproduce your problem label Aug 13, 2020

KouSum closed this as completed Aug 14, 2020

marian2js mentioned this issue Oct 20, 2020

clone.weekday is not a function react-component/picker#123

Open

iamkun mentioned this issue Feb 9, 2021

chore: use Day.js as peerDependencies react-component/picker#214

Merged

afc163 mentioned this issue Jul 1, 2021

fix: dayjs and date-fns as deps with wide semver version range react-component/picker#270

Merged

omeraplak mentioned this issue Nov 20, 2021

[BUG] Error while using DatePicker on edit forms. refinedev/refine#1259

Closed

lhbxs mentioned this issue Mar 8, 2023

format为dateTime时选择时间报错 alibaba/x-render#1071

Closed

afc163 added ❓FAQ issues would be discussed a lot and removed 🤔 Need Reproduce We cannot reproduce your problem labels Jul 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

form.setFieldsValue 之后再去选择日期出错clone.weekday is not a function #26190

form.setFieldsValue 之后再去选择日期出错clone.weekday is not a function #26190

KouSum commented Aug 13, 2020

07akioni commented Aug 13, 2020

ant-design-bot commented Aug 13, 2020

KouSum commented Aug 14, 2020

crownclownwl commented Aug 14, 2020

KouSum commented Aug 14, 2020 •

edited

Loading

G-WangZH commented Sep 9, 2020

victorWuxz commented Sep 9, 2020

harshithmullapudi commented Sep 24, 2020

Deboracgs commented Sep 29, 2020

crownclownwl commented Sep 30, 2020

fabiendeborde commented Sep 30, 2020

hoangmeo commented Sep 30, 2020

Deboracgs commented Sep 30, 2020

Deboracgs commented Sep 30, 2020

rohitsahu4 commented Oct 5, 2020

marian2js commented Oct 20, 2020

JemarJones commented Jan 14, 2021

afc163 commented Jan 14, 2021

iamkun commented Jan 14, 2021

afc163 commented Jan 14, 2021

iamkun commented Jan 14, 2021

iamkun commented Jan 17, 2021

cjfff commented Feb 7, 2021

PipBoy2000 commented Feb 8, 2021

iamkun commented Feb 9, 2021

YemreAybey commented Feb 10, 2021 •

edited

Loading

Messiahhh commented Jun 22, 2022

form.setFieldsValue 之后再去选择日期 出错clone.weekday is not a function #26190

form.setFieldsValue 之后再去选择日期 出错clone.weekday is not a function #26190

Comments

KouSum commented Aug 13, 2020

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

07akioni commented Aug 13, 2020

ant-design-bot commented Aug 13, 2020

KouSum commented Aug 14, 2020

crownclownwl commented Aug 14, 2020

KouSum commented Aug 14, 2020 • edited Loading

G-WangZH commented Sep 9, 2020

victorWuxz commented Sep 9, 2020

harshithmullapudi commented Sep 24, 2020

Deboracgs commented Sep 29, 2020

crownclownwl commented Sep 30, 2020

fabiendeborde commented Sep 30, 2020

hoangmeo commented Sep 30, 2020

Deboracgs commented Sep 30, 2020

Deboracgs commented Sep 30, 2020

rohitsahu4 commented Oct 5, 2020

marian2js commented Oct 20, 2020

JemarJones commented Jan 14, 2021

afc163 commented Jan 14, 2021

iamkun commented Jan 14, 2021

afc163 commented Jan 14, 2021

iamkun commented Jan 14, 2021

iamkun commented Jan 17, 2021

cjfff commented Feb 7, 2021

PipBoy2000 commented Feb 8, 2021

iamkun commented Feb 9, 2021

YemreAybey commented Feb 10, 2021 • edited Loading

Messiahhh commented Jun 22, 2022

form.setFieldsValue 之后再去选择日期出错clone.weekday is not a function #26190

form.setFieldsValue 之后再去选择日期出错clone.weekday is not a function #26190

KouSum commented Aug 14, 2020 •

edited

Loading

YemreAybey commented Feb 10, 2021 •

edited

Loading