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

DateRangePicker 快捷按钮没有正确读取disableDate #2698

Closed
begoat opened this issue Sep 7, 2022 · 2 comments
Closed

DateRangePicker 快捷按钮没有正确读取disableDate #2698

begoat opened this issue Sep 7, 2022 · 2 comments

Comments

@begoat
Copy link
Contributor

begoat commented Sep 7, 2022

What version of rsuite are you using?

5.17.1

What version of React are you using?

18.2.0

What version of TypeScript are you using (if any)?

No response

What browser are you using?

Chrome latest

Describe the Bug

import { useCallback } from "react";
import { DateRangePicker } from "rsuite";
import { isBefore, startOfDay, subDays } from "date-fns";
import "./styles.css";
import "rsuite/dist/rsuite.min.css";

const minOffset = 1;
// 2022-09-07 15:40 UTC+8
const today = new Date(1662536382712);

export default function App() {
  const handleDisabledDate = useCallback((date) => {
    return isBefore(date, subDays(today, minOffset));
  }, []);
  return (
    <div className="App">
      <DateRangePicker disabledDate={handleDisabledDate} />
    </div>
  );
}

image
快捷选项和日期的选择 针对 disableDate 参数 表现不一致
日期选择可以选择昨天
快捷选择不能选择昨天

Expected Behavior

日期选择可以选择昨天
快捷选择可以选择昨天

期待快捷选择内部做 startOfDate(date) 的处理

To Reproduce

https://codesandbox.io/s/focused-bohr-06trj1?file=/src/App.js:0-549

@simonguo
Copy link
Member

simonguo commented Sep 14, 2022

出现这个问题的原因是 disabledDate 的回调参数 date , 在快捷选项的地方是默认时间是 [2022-09-06 00:00:00, 2022-09-06 23:59:59],而在日历面板上的日期默认都是当前的时间,这样就导致在禁用日期的时候,如果存在时间上的偏差,就会出现你遇到的这种情况。

在使用过程中有两种方式可以解决:

  1. disabledDate 比较日期的时候,忽略时间。
isBefore(startOfDay(date), subDays(startOfDay(today), minOffset));
  1. 重新定义 ranges 参数,修改 Yesterday 为 [subDays(todayDate, 1),subDays(todayDate, 1)]

关于在 DateRangePicker 内如何调整? 还没想好。如果要满足以上期望的效果让快捷选择能够选择,就需要更改 Yesterday 的默认时间,但是显然默认时间设置为 00:00:00 - 23:59:59 更为合理。

@SevenOutman
Copy link
Member

Fixed in #2984 and released in v5.24.0

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

No branches or pull requests

3 participants