0

我正在使用 React Calendar https://www.npmjs.com/package/react-calendar，我想通过单击开始日期和结束日期来选择日期范围。我在 Calendar 中使用了 selectRange 属性，但是第一次渲染 Calendar 时，甚至没有单击任何内容，范围选择器将自动将开始日期设置为今天的日期。我不想要这个。我想以干净的状态加载日历，然后当我开始单击将是开始日期时，我可以单击结束日期的下一个元素。我怎样才能做到这一点？

这是我的代码：

export default function TestCalendar() {
    const [value, onChange] = useState(new Date())

    return(
        <>
        <Calendar selectRange={true} onChange={onChange}
        value={value} minDate={new Date()} minDetail={"year"} navigationAriaLabel={"Go up"} activeStartDate={null}/>

        {value[0] != null && <><div>{value[0].toString()}</div><div>{value[1].toString()}</div></>}

        </>
    )
}

这是我不想要的功能示例（加载时它将自动选择今天的日期（6 月 5 日），然后我开始悬停以单击结束日期）： https ://i.gyazo.com/91ec726a453c2b138f9c1b0aae09e1a6.mp4

4

2 回答 2

0

好吧，我想出了答案。我正在复制起始代码，但我不知道 value 道具也设置了起始值。如果我从 <Calendar /> 中删除该道具，那么一切正常，我可以选择开始日期，而不会自动获取当前日期。

于 2021-07-05T07:05:26.427 回答
0

问题是您初始化value为今天 ( new Date()) 并分配给Calendar's valueprop。我建议您使用defaultValue（以不受控制的方式使用 react-calendar）。

于 2021-07-05T07:07:07.657 回答