antd DatePicker displaying wrong day names

Question

I have a web application written in reactjs that has a DatePiker with the location set to "pt-BR" where the user chooses a date on the calendar, it happens that the calendar shows the wrong days as in the image below:

enter image description here

In the image, the days appear as ordered numbers, but they are not to be displayed with numbers, but with their real names, which in the case of Portuguese would be "Dom, Seg, Ter, Qua, Qui, Sex, Sab"

I've done everything here to fix this and I haven't been successful.

I use ANTD dependencies in version 4.4.2 with REACT in version 16.13.1 and we have no way to update this at the moment due to customer issues

I really appreciate anyone who can help me with this

in this case, the calendar should appear like this.:

enter image description here

Answer 1

I had a similar problem at the time and this guy's solution helped me: How to Change the Day of Week Format.
However, I needed to replace the whole text, e.g. not just add a letter after it, so I did this:

/* set the visibility of the Th:cell to hidden */
.ant-picker-body table thead tr > th:nth-child(1) {
   visibility: hidden;
}

/* add the new content, turn visibility ON, reset margins and replace
   text using css's pseudo selector*/
/* first item */
.ant-picker-body table thead tr > th:nth-child(1)::after {
   content: 'DOM';
   position: absolute;
   visibility: visible;
   left: 2px;
   top: 0;
}
.ant-picker-body table thead tr > th:nth-child(2) {
   visibility: hidden;
}
   
/* do the same for all other cells from the names of the days of the
   week to the seventh day*/
.ant-picker-body table thead tr > th:nth-child(2)::after {
  content: 'SEG';
  position: absolute;
  visibility: visible;
  left: 4px;
  top: 0;
}

here it worked fine, hope this helps