禁用 Antd Datepicker 工具提示答案

【问题标题】：Disable Antd Datepicker tooltip禁用 Antd Datepicker 工具提示
【发布时间】：2020-08-17 18:41:34
【问题描述】：

我在我的网站中使用 Antd Datepicker。我们从外部 api 获得一组表示禁用日期的数字，并仅显示日期选择器中的日期（无月、年等）。日期选择是按月订阅的，用户只需选择他想要从他的帐户中扣除钱的月份的哪一天，为此我们在日期选择器中将 2015 年 11 月作为默认值（因为它有 1st作为星期天）。现在，当用户将鼠标悬停在显示 [DD，2015 年 11 月] 的日期上时。我不希望工具提示对用户可见，因为它会创建糟糕的用户体验。

<DatePicker
  defaultPickerValue="{moment('2015-11-01')}"
  dropdownClassName="c-datepicker-dropdown"
  disabledDate="{(current) => this.disabledDates(current, this.props.frequency_data)}"
  showToday={false}
  allowClear={false}
  onChange="{(date) => this.handleLogic(date)}"
  style="{{ width: 132 }}"
/>

这里是codesandbox 我希望删除悬停的工具提示

screenshot

【问题讨论】：

我看不到使用此代码显示工具提示的可能性。您能否分享更多内容以重现您的要求。也许在codesandbox.io
我不相信您可以隐藏日期工具提示，因为日期工具提示 onHover 是浏览器的默认行为。日期工具提示源于日期是具有title 属性的锚元素。您必须从所有日期链接中删除 title 属性才能隐藏工具提示。
有什么办法可以改变工具提示的行为.. 可能会延迟超过 10 秒，这样它就不是那么明显了，或者只是在工具提示中显示日期[..我现在只需要快速修复.. 稍后将不得不重新访问以重构我们的日期选择逻辑。

标签： css reactjs datepicker tooltip antd

【解决方案1】：

这可能会解决问题，但它有点难看，因为指针似乎在悬停时闪烁。

td.ant-calendar-cell {
  cursor: pointer;
}

td.ant-calendar-cell:hover {
  pointer-events: none;
  cursor: pointer;
}

【讨论】：

【解决方案2】：

Antd 提供了一种方法来设置如何通过 dateRender 选项呈现每个日期。添加自定义渲染函数对我有用。

<DatePicker
          defaultPickerValue="{moment('2015-11-01')}"
          format="Do"
          dateRender="{(current) => this.renderCustomDate(current)}"
          dropdownClassName="c-datepicker-dropdown"
          disabledDate="{(current) => this.disabledDates(current,this.props.frequency_data.MONTHLY)}"
          showToday={false}                                            
          style="{{ width: 132 }}"
          />

这是我的自定义函数。（标题为空，因此工具提示不可见）

 renderCustomDate(current) {
    return (
      <div className="ant-calendar-date" title="">
        {current.date()}
      </div>
    );
  }

【讨论】：