【AntDesign】Calendar コンポーネントに日本語ロケールを指定する

概要

React のコンポーネントライブラリである Ant Design

その Ant Design の Calendar コンポーネントにて、日本語ロケールを指定する方法。

結論

結論から書くと、以下のように指定しました。 ※アプリケーション全体から参照できるよう、共通コンポーネントとして定義しています。

import dayjs from 'dayjs';
import { Calendar as Original, type CalendarProps } from 'antd';
import enUS from 'antd/es/calendar/locale/en_US';

export const Calendar: React.FC<CalendarProps<dayjs.Dayjs>> = (props) => {
  return (
    <Original
      {...props}
      locale={{
        ...enUS,
        lang: {
          ...enUS.lang,
          locale: 'ja_JP',
          placeholder: '日付を選択',
          rangePlaceholder: ['開始日', '終了日'],
          today: '今日',
          now: '現在',
          month: '月',
          year: '年',
          monthBeforeYear: false,
          shortWeekDays: ['日', '月', '火', '水', '木', '金', '土'],
          shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

          // 他にも指定したいものがある場合、ここに追記
        },
      }}
    />
  );
};

説明

Ant Design でロケール指定する方法はいくつかありそうです。

まずは ConfigProvider。

import { ConfigProvider } from 'antd';
import frFR from 'antd/locale/fr_FR';

return (
  <ConfigProvider locale={frFR}>
    <App />
  </ConfigProvider>
);

https://ant.design/docs/react/i18n

次にコンポーネントレベル？での指定。

// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
// import dayjs from 'dayjs';
// import 'dayjs/locale/zh-cn';
// dayjs.locale('zh-cn');

<Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
  onPanelChange={onPanelChange}
  onSelect={onSelect}
/>

内部的に dayjs を利用しているから、 dayjs で指定してくれ、ということらしい。

https://ant.design/components/calendar

しかし、いづれの方法もうまく行かず…。月が Jan, Feb, Mar... 曜日が Su, Mo, Tu... のまま。

そこで、ロケールファイルの全容を発見。

{
  "lang": {
    "locale": "en_US",
    "placeholder": "Select date",
    "rangePlaceholder": ["Start date", "End date"],
    "today": "Today",
    "now": "Now",
    "backToToday": "Back to today",
    "ok": "OK",
    "clear": "Clear",
    "month": "Month",
    "year": "Year",
    "timeSelect": "Select time",
    "dateSelect": "Select date",
    "monthSelect": "Choose a month",
    "yearSelect": "Choose a year",
    "decadeSelect": "Choose a decade",
    "yearFormat": "YYYY",
    "dateFormat": "M/D/YYYY",
    "dayFormat": "D",
    "dateTimeFormat": "M/D/YYYY HH:mm:ss",
    "monthFormat": "MMMM",
    "monthBeforeYear": true,
    "previousMonth": "Previous month (PageUp)",
    "nextMonth": "Next month (PageDown)",
    "previousYear": "Last year (Control + left)",
    "nextYear": "Next year (Control + right)",
    "previousDecade": "Last decade",
    "nextDecade": "Next decade",
    "previousCentury": "Last century",
    "nextCentury": "Next century",
    "shortWeekDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    "shortMonths": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },
  "timePickerLocale": {
    "placeholder": "Select time"
  },
  "dateFormat": "YYYY-MM-DD",
  "dateTimeFormat": "YYYY-MM-DD HH:mm:ss",
  "weekFormat": "YYYY-wo",
  "monthFormat": "YYYY-MM"
}