CODEWITHSUNDEEP
reactjsdatepickermomentjsfarsijalali-calendar
Ali Amini
Ali Amini

Reputation: 192

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

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
    }
  },
  ...
};

Upvotes: 2

Views: 3691

Answers (3)

Pedram
Pedram

Reputation: 16575

Based on accepted answer, I describe how to use this package.

  1. First install npm i antd-jalali@latest or use with --force
  2. Add JalaliLocaleListener to App.js like berlow:

App.js || App.jsx || App.tsx

import faIR from 'antd/locale/fa_IR';
import { JalaliLocaleListener } from "antd-jalali";

<ConfigProvider direction="rtl" locale={faIR} theme={theme} >
 <JalaliLocaleListener />
// routes 
</ConfigProvider>
  1. import DatePickerJalali in your desire component:

Component.jsx || Component.tsx

import { DatePicker as DatePickerJalali } from "antd-jalali";

<DatePickerJalali
   size="large"
   format="YYYY-MM-DD"
/>

Ant-Design Jalali DatePicker

Upvotes: 0

reza relax
reza relax

Reputation: 1

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>

Upvotes: 0

Mehdi Ardakani
Mehdi Ardakani

Reputation: 36

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} />

Upvotes: 1

Related Questions