ant-design DatePicker with date-fns bug when typing in the date input

lfapxunr  于 4个月前  发布在  其他
关注(0)|答案(6)|浏览(90)

Steps to reproduce

Select date
Manually update day by typing in the input e.g. 15
DatePicker will change date after inputing 1 not allowing to enter 5
https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2NiNTc2aDB2NmRieGduZmEwdHk1dTk4bWhkNTZ4OGszeWNvcmUwbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/vDCB6mBplGAziysllv/giphy.gif

What is expected?

Date should be correctly modified.

What is actually happening?

Date is not correctly modified, pointed place is jumping to the end when removing, can't modify correctly date or time.
| Environment | Info |
| ------------ | ------------ |
| antd | 4.24.8 |
| React | 18.2.0 |
| System | macOS 14.0 (23A344) |
| Browser | Google Chrome Version 120.0.6099.234 |

ylamdve6

ylamdve61#

Seems date-fns match the date format not in strict check.

yfwxisqw

yfwxisqw2#

Hello @Sebastian-Debicki. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Sebastian-Debicki,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的 预设模板 ,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

w3nuxt5m

w3nuxt5m3#

Seems date-fns match the date format not in strict check.

@zombieJ Can you tell something more about this? I checked documentation and there is nothing about some strict mode. Can I fix this somehow?

wi3ka0sx

wi3ka0sx4#

Here is:
https://github.com/react-component/picker/blob/master/src/generate/dateFns.ts#L102

Ref:
https://github.com/react-component/picker/blob/master/src/generate/dayjs.ts#L167

z4bn682m

z4bn682m5#

@zombieJ thank you for help
Here is my workaround solution for this issue. Maybe it will be useful to someone:

import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';
import generatePicker from 'antd/es/date-picker/generatePicker';
import { isValid, parse, format } from 'date-fns';
import * as Locale from 'date-fns/locale';

import 'antd/es/date-picker/style/index';

const dealLocal = (str: string) => {
  return str.replace(/_/g, '');
};

export const DatePicker = generatePicker<Date>({
  ...dateFnsGenerateConfig,
  locale: {
    ...dateFnsGenerateConfig.locale,
    parse: (locale, text, formats) => {
      const validFormat = formats.some((currentFormat) => {
        const parsedDate = parse(text, currentFormat, new Date(), {
          locale: Locale[dealLocal(locale) as keyof typeof Locale],
        });
        return isValid(parsedDate) && format(parsedDate, currentFormat) === text;
      });

      if (validFormat) {
        return parse(text, formats[0], new Date(), {
          locale: Locale[dealLocal(locale) as keyof typeof Locale],
        });
      } else {
        return null;
      }
    },
  },
});
daupos2t

daupos2t6#

@Sebastian-Debicki@zombieJ I think maybe we should keep this open until it's resolved out of the box without any workaround, or at least we should post the corresponding workaround in the docs.

It generally doesn't make sense for who's new here and encounters the error after following the docs to setup.

What's your opinion?

相关问题