Ant Design日历：如何更改星期几的格式？

Question

我在项目中使用Ant Design 日历组件，并按照以下方式设置：

当前星期几的格式为dd。例如： Su, Mo, Tu等。

是否可以通过props更改格式为ddd。例如：Sun, Mon, Tue等？

- Barry Michael Doyle

---

请查看这个链接，可能会对您有所帮助。https://stackoverflow.com/a/58570581/5124488 - blueseal

Answer 1

不能直接在 Ant Design 组件上更改此设置，但 Ant Design 在幕后使用 moment，moment 使用 locale.weekdaysMin，所以您可以导入 moment 并更改它们:

import moment from 'moment'

moment.updateLocale('en', {
  weekdaysMin : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
});

- StackedQ

---

这不是最佳实践，因为它会全局改变 moment 配置。你可以使用一些 CSS，虽然不太直接。 - StackedQ

Answer 2

改变 moment 的配置会导致全局更改。如果您确定要将所有依赖于 moment 的最小化英文工作日名称设置为“Sun Mon Tue....”，那么这很好，您应该选择 Barry Michael Doyle 的答案。

但是，如果您只想将此更改应用于特定的日历，则建议使用 CSS ::after 伪类。

首先，将某些类名应用于日历，以便您可以用于 CSS 定位。

import React from "react";
import { Calendar } from "antd";

export const App = () => <Calendar className="my-calendar" />;

然后您可以使用CSS添加额外的字母：

    /* adds 'n' after "Su"*/
    .my-calendar table thead tr > th:nth-child(1)::after {
        content: "n";
    }

    /* adds 'n' after "Mo"*/
    .my-calendar table thead tr > th:nth-child(2)::after {
        content: "n";
    }

    /* ... etc., etc., ....*/
    .my-calendar table thead tr > th:nth-child(3)::after {
        content: "e";
    }

    .my-calendar table thead tr > th:nth-child(4)::after {
        content: "d";
    }

    .my-calendar table thead tr > th:nth-child(5)::after {
        content: "u";
    }

    .my-calendar table thead tr > th:nth-child(6)::after {
        content: "i";
    }

    .my-calendar table thead tr > th:nth-child(7)::after {
        content: "t";
    }

注意：如果您需要支持不同的语言，则此解决方案将要求您根据语言设置动态设置类名，并为每种语言拥有不同的上述CSS集。对于一两种语言来说，这不会太糟糕，但如果超过这个数量，您可能需要采取不同的方法。

- Nathan Smith

---

好的解决方案，这拯救了我的一天，谢谢。 - Armando Marques da S Sobrinho

Answer 3

你必须先使用变量设置格式：

 const dateFormat = 'DDD/MM/YYYY';

然后在DatePicker中，您指出要使用自定义格式：

  <DatePicker format = {dateFormat} />

另一种方法是渲染日期选择器中的每个单元格，将数字放置在自定义表单中：

 <DatePicker
     format = {dateFormat}
     dateRender = {(current) => {
         const num = (current.toString().length < 2) ? "0" + current : current)
         return (
            {num}
         )
     }}
 />

- Jorge Pirela