css 禁用Antd日期选择器工具提示

yb3bgrhw 于 12个月前发布在其他

关注(0)|答案(3)|浏览(234)

我在我的网站中使用了Antd Datepicker，我们从外部API中获取一个表示禁用日期的数字数组，并在Datepicker中只显示日期（没有月份、年份等）。日期选择是针对每月订阅的，用户只需选择他想要从他的账户中扣除钱的月份的哪一天，为此，我们在日期选择器中将2015年11月作为默认值（因为它有1st作为星期天）。现在当用户悬停在它显示的日期[DD，我不希望工具提示对用户可见，因为它会产生糟糕的用户体验。

<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的

css

来源：https://stackoverflow.com/questions/62952186/disable-antd-datepicker-tooltip

3条答案

按热度按时间

2guxujil1#

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

型

赞(0）回复(0）举报 12个月前

csga3l582#

这可能会解决这个问题，但它有点难看，因为指针似乎 Flink ，而悬停。

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

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

字符串

赞(0）回复(0）举报 12个月前

30byixjq3#

这不是一个工具提示，而是<td>元素上的title属性。如果你想禁用它，你可以这样做。在antd版本5.12.5中测试和工作。

const cellRender = (current) => {
  return (
    <div title="" className="ant-picker-cell">
      <div title="" className="ant-picker-cell ant-picker-cell-in-view">
        <div title="" className="ant-picker-cell-inner">
          {current.date()}
        </div>
      </div>
    </div>
  );
};

个字符

赞(0）回复(0）举报 12个月前

我来回答

css 禁用Antd日期选择器工具提示

3条答案

相关问题

热门标签

最新问答