Question

我在我的网站上使用Antd Datepicker。我们从外部api获取代表无效日期的数字数组，并仅在datepicker中显示日期（无月，年等）。日期选择用于按月订阅，用户只需选择要从其帐户中扣除这笔钱的月份，为此，我们将日期选择器的默认值设为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，我希望删除悬停时的工具提示

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工具提示

2 个答案: