ReactJS - Ant-Design v4 jalali(persian) datepicker problem

Question

I try a lot to change locale in antd datepicker but I still couldn't. in antd v3 I change locale to persian and have jalali(شمسی) calendar, but in antd v4, I do some ways but only have uncomplete translating.

برای مثال، وقتی دیت‌پیکر فارسی می‌شد، تاریخی که توی دیت‌پیکر قرار می‌گرفت تاریخِ میلادی بود: ۲۰۲۰/۱۰/۰۶

تنها تغییر این بود که نامِ ماه‌ها به شمسی شده بود. مثلِ «مهر ۲۰۲۰». و روزهای تقویم هم، روزهای شمسی بود، اما وقتی مثلا روی روزِ ۱۵ کلیک می‌کردم، این تاریخ توی دیت‌پیکر انتخاب می‌شد: ۲۰۲۰-۱۰-۰۶

codes:

import { DatePicker, ConfigProvider } from 'antd';
import "moment/locale/fa";
import moment from "moment";
import fa_IR from "antd/es/locale/fa_IR";
import locale from "antd/es/date-picker/locale/fa_IR";

<ConfigProvider locale={fa_IR}>
    <DatePicker locale={locale} defaultValue={moment()} />
</ConfigProvider>

and I also use ant-design-jalali. define an alias in webpack config:

module.exports = {
  ...
  resolve: {
    modules: ['node_modules'],
    alias: {
      moment: path.resolve(__dirname, './node_modules/antd-jalali-moment') // -> this alias
    }
  },
  ...
};

Answer 1

i had the same problem this worked for me:

first add antd-jalali next add day jalali js after that insert this lines into your code:

import 'moment/locale/fa';
import locale from 'antd/es/date-picker/locale/fa_IR';

and use in <DatePickerJalali {...props} locale={locale} />

Answer 2

import { DatePicker, ConfigProvider } from 'antd'; 
import "moment/locale/fa"; 
import moment from "moment"; 
import fa_IR from "antd/es/locale/fa_IR"; 
import locale from "antd/es/date-picker/locale/fa_IR"; 

<ConfigProvider locale={fa_IR}> <DatePicker locale={locale} defaultValue={moment()} /> </ConfigProvider>