禁用 Antd Datepicker 工具提示

Question

我在我的网站中使用 Antd Datepicker。我们从外部 api 获取表示禁用日期的数字数组，并仅显示日期选择器中的日期（无月、年等）。日期选择适用于每月订阅，用户只需选择他想要从他的帐户中扣除费用的月份中的哪一天，为此，我们在日期选择器中使用 2015 年 11 月作为默认值（因为它有 1 日）作为周日）。现在，当用户将鼠标悬停在日期上时，它会显示 [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我想删除悬停时的工具提示

Answer 1

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

Answer 2

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

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

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

Answer 3

这不是工具提示，而是元素上的标题属性。如果您想禁用此功能，可以执行以下操作。已在 antd 5.12.5 版本中测试并运行。

const cellRender =（当前）=> { 返回 （ {当前日期（）} ）； };