Ant Design RangePicker日期区间组件同时兼容原生和外部按钮控制实现

德顺

发布于 2023-08-25 13:44:40

4330

发布于 2023-08-25 13:44:40

文章被收录于专栏：前端资源

Ant Design RangePicker 日期区间组件可以使用 open 属性实现外部按钮控制展开收起。

但是使用 open 属性后，就只能通过属性控制展开和收起，失焦收起和聚焦展开等原生的功能就失效了。

可不可以既能通过点击 RangePicker 组件展开日历弹窗，又可以通过外部按钮控制呢，答案是可以。

我想了一下，如果不使用 open 属性，也就是 open 的值是 undefined ，那么判断一下，如果控制 open 的变量为 true 时使用变量控制，为 false 时给 open 赋值为 undefined 不就可以实现了。

代码如下：

const [dateOpen, setDateOpen] = useState(false); // 往返日期弹窗控制
...
<RangePicker
  open={newDateOpen ? newDateOpen : undefined}
  onChange={(date) => {
    if (date?.[0] && date?.[1]) {
      setNewDateOpen(false);
    }
  }}
/>
<Button
  onClick={() => setDateOpen(!dateOpen)}
/>
  调整日期
</Button>

未经允许不得转载：w3h5-Web前端开发资源网 » Ant Design RangePicker日期区间组件同时兼容原生和外部按钮控制实现

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

ant