Question

我需要在AntD日历中自定义日期名称。对于星期日，“ Su”需要显示“ Sun”。有什么办法吗？

谢谢。

Answer 1

我不得不手动更改每个th和span的内容。您可以根据需要更改代码。

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

/* sunday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(1)>span{
  display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(1):after{
  content: "Sun";
  display: block;
  font-weight: normal;
}

/* monday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(2)>span{
  display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(2):after{
  content: "Mon";
  display: block;
  font-weight: normal;
}

/* tuesday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(3)>span{
  display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(3):after{
  content: "Tue";
  display: block;
  font-weight: normal;
}

/* wednesday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(4)>span{
  display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(4):after{
  content: "Wed";
  display: block;
  font-weight: normal;
}

/* thursday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(5)>span{
  display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(5):after{
  content: "Thu";
  display: block;
  font-weight: normal;
}

/* friday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(6)>span{
  display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(6):after{
  content: "Fri";
  display: block;
  font-weight: normal;
}

/* saturday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(7)>span{
  display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(7):after{
  content: "Sat";
  display: block;
  font-weight: normal;
}

这是代码沙箱。根据需要更改代码。code。希望能帮助到你。

antd calender

Answer 2

对我来说，它通过使用 momentjs 在正确的属性上设置我想要的信息来工作：

<Calendar 
   locale={{ 
      lang: { 
         locale: 'en', 
         dayFormat: moment.updateLocale('en', { 
                    weekdaysMin: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]
         }) 
       } 
    }} 
/>

Answer 3

例如，为了更改为葡萄牙语，以下是对我有用的方法：

（此外，在此之前，重要的是在 DatePicker 中使用“wrapper”类以获取所需元素。为此，我使用了一个名为“pt-datepicker”的类，如下所示）

<DatePicker dropdownClassName="pt-datepicker" />

在此处阅读有关“dropdownClassName”的更多信息：https://ant.design/components/date-picker/#Common-API

现在，SCSS 更改每个工作日的标签：

.pt-datepicker {
  .ant-picker-panel-container {
    .ant-picker-panel {
      .ant-picker-date-panel {
        .ant-picker-body {
          .ant-picker-content {
            thead {
              tr {
                th:nth-child(1) {
                  visibility: hidden;
                  position: relative;
                }

                th:nth-child(1):after {
                  visibility: visible;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  content: 'Dom';
                  transform: translate(-50%, -50%);
                }

                th:nth-child(2) {
                  visibility: hidden;
                  position: relative;
                }

                th:nth-child(2):after {
                  visibility: visible;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  content: 'Seg';
                  transform: translate(-50%, -50%);
                }

                th:nth-child(3) {
                  visibility: hidden;
                  position: relative;
                }

                th:nth-child(3):after {
                  visibility: visible;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  content: 'Ter';
                  transform: translate(-50%, -50%);
                }

                th:nth-child(4) {
                  visibility: hidden;
                  position: relative;
                }

                th:nth-child(4):after {
                  visibility: visible;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  content: 'Qua';
                  transform: translate(-50%, -50%);
                }

                th:nth-child(5) {
                  visibility: hidden;
                  position: relative;
                }

                th:nth-child(5):after {
                  visibility: visible;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  content: 'Qui';
                  transform: translate(-50%, -50%);
                }

                th:nth-child(6) {
                  visibility: hidden;
                  position: relative;
                }

                th:nth-child(6):after {
                  visibility: visible;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  content: 'Sex';
                  transform: translate(-50%, -50%);
                }

                th:nth-child(7) {
                  visibility: hidden;
                  position: relative;
                }

                th:nth-child(7):after {
                  visibility: visible;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  content: 'Sab';
                  transform: translate(-50%, -50%);
                }
              }
            }
          }
        }
      }
    }
  }
}

自定义一天的AntD日历

3 个答案: