Disable Antd Datepicker tooltip

Issue

I'm using Antd Datepicker in my website. We get an array of numbers representing disabled dates from an external api and show only the dates in the datepicker(no month, year etc). The date selection is for a monthly subscription and the user just selects the day of the month he wants for the money to be deducted from his account, for this purpose we have gone with November 2015 as default value in our datepicker(since it has 1st as a Sunday). Now when a user hovers over the date it shows [DD, November 2015]. I don't want the tool tip to be visible to the user as it creates a bad UX.

<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 }}"
/>

Here is the codesandbox I want the tooltip onhover to be removed

screenshot

Solution

Antd provides a way to style how one renders each date through the dateRender option. Adding a custom render function did the trick for me.

<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 }}"
          />

Here's my custom function. (Title is empty, hence the tooltip is not visible)

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

Answered By - Arjun raja