禁用 Antd Datepicker 工具提示

Question

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

<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

Answer 1

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

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

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

Answer 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>
    );
  }

禁用 Antd Datepicker 工具提示

Disable Antd Datepicker tooltip

css

datepicker

tooltip

reactjs

antd