LoginSignup
@rempei

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

DatePickerの英語表記の部分を日本語にしたい

Q&A

Closed

JavaScriptReactAntDesign

解決したいこと

antdのDatePickerの英語で書かれている所を日本語に変えたいのですが、どこを設定すればいいのか分かりません。どなたか分かる方がいらっしゃいましたら教えてほしいです。

image.png

該当するソースコード

import moment from 'moment';
import 'moment/locale/ja';

moment.locale('ja');

<DatePicker />

chatGPTに聞いたら上記のコードで行けるといわれたのですがダメでした。

image.png

0 likes

2Answer

h_kono0707
@h_kono0707

シンタックスハイライトを使いたいので別回答とします。

import React from 'react';
import './index.css';
import { DatePicker } from 'antd';
import locale from 'antd/es/date-picker/locale/ja_JP';
import 'dayjs/locale/ja';

const App: React.FC = () => (
    <DatePicker locale={locale} bordered={false} />
);

export default App;

※dayjsの依存関係の追加が必要です
image.png

1Like

Comments

  1. @rempei

    Questioner

    参考にさせていただきます。
    ありがとうございます。
h_kono0707
@h_kono0707

https://ant.design/docs/react/i18n
対象コンポーネント（もしくは親コンポーネントごと）をConfigProviderで囲ってlocaleを渡してあげれば設定できます。

import { ConfigProvider } from 'antd';
import ja_JP from 'antd/locale/ja_JP';
return (
  <ConfigProvider locale={ja_JP}>
    <Page />
  </ConfigProvider>
)
0Like

Comments

  1. @rempei

    Questioner

    ご回答ありがとうございます。上記に画像を追加したのですが
    やってみたら、todayが日本語になりましたがそれ以外は変わりませんでした。


    import ja_JP from "antd/locale/ja_JP"

    <ConfigProvider locale={ja_JP}>
    　<DatePicker />
    </ConfigProvider>

    DatePickerをそのまま囲みましたが他にしなければならないことがあるでしょうか？

Your answer might help someone💌

LoginSign Up