Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

5.1.0 calendar组件的 onSelect、onChange 似乎有错,和认知中表现不一致 #39801

Closed
shifenhutu opened this issue Dec 25, 2022 · 8 comments
Assignees
Labels

Comments

@shifenhutu
Copy link
Contributor

Reproduction link

Edit on CodeSandbox

Steps to reproduce

点击任何日期 或者 切换月份,然后查看 console的输出

What is expected?

onSelect 方法我理解中,是当我选中某个 day后才会触发,但是我切换月份(比如改成1月,再改成3月)、年份 也会触发,
那么请问,我要怎么记录用户选择的日期呢?
假如用户选择了【2022年1月1日】, 这时候,我会在 onSelect 里读取值 并存入状态,
这时候用户 切换到了2月(此时面板变成了2月,但用户不去点击某个日) , 这时候onSelect又触发了, 状态就变了,

我只是想要记录,用户真正点击的日期, 用户切换月份,年份,我不关心, 我只关心用户点击了某个日后,我可以拿到 年月日

我尝试了 onSelect onChange 都不行, 而这个组件也并没有其他 回调 可以拿到 我想要的值

简单总结,有没有某个回调,只有当用户点击具体的 day (日、天) 才会触发

不知道我的表述 是否明朗, 谢谢

What is actually happening?

如上

Environment Info
antd 5.1.0
React 18.2
System mac
Browser chrome最新版
@shifenhutu
Copy link
Contributor Author

我发帖后,发现有了一个一样的 #39779

@candy4290
Copy link
Contributor

candy4290 commented Dec 26, 2022

日期是由year、month、day组成的啊,任何一个的改变都会触发
至于onSelect、onChange,onSelect点击了就会回调(哪怕year、month、day都没变化),而onChange是日期发生变化时回调。
我是这么理解的

@chj-damon
Copy link
Contributor

这个问题不止在v5版本,v4版本里面也是一样的问题。

@Ulisseus
Copy link

Ulisseus commented Feb 1, 2023

It would be great to have a way to decide if we want to fire onSelect callback when the month or year changes. Current behavior results in a bad ux sometimes.

Imagine a scenario when we have a controlled Calendar component and initial value for date is not set. User changes month or year and suddenly without his action there is a selected date in calendar. As far as I know there is no good way to prevent this behavior right now.

@kevinzl
Copy link

kevinzl commented Feb 18, 2023

选年月日3个公用一个onSelect回调方法,无法区分是那个类型,期望多给一个参数 可以知道是选择的那个的回调 ;类似 onSelect(date: Moment, model: string), 通过 model 可以区分是年,月,日的选择

@dbwcooper
Copy link

I fixed this issue by setting a ref

const App = () => {

  const ref = useRef<boolean>(true)

  const onCellSelect = (value: Dayjs) => {
    if (ref.current) {
      // do something ...
    }

    hackRef.current = true
  }

  return (
      <Calendar
        onSelect={onCellSelect}
        // 我的场景是固定显示月份
        mode="month"
        onPanelChange={(_, mode) => {
          // 避免 Cell 需要点击两次才能弹出详情
          if (mode !== 'year')
            ref.current = false
        }}
      />
  )
}

export default App

@fasidOnGit
Copy link

@dbwcooper that's just 1 usecase. changing the calendar month emits an onSelect event.

@dmwin72015
Copy link

Has this issue been fixed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

9 participants