Convert to Persian Month in Ant Design DatePicker

This function is used for Ant Design DatePicker

Features

• Fully customized Persian month names
• Easy to use with Ant Design
• Simple API consistent with Ant Design DatePicker
• Written in TypeScript with full type definitions

Installation

1npm install convert-to-persian-month-antd
2# or
3yarn add convert-to-persian-month-antd

Dependencies

This package has the following peer dependencies:

• react
• react-dom

Usage

1import { DatePicker } from "antd";
2import locale from "antd/es/date-picker/locale/fa_IR";
3import convertToPersianMonths from "convert-to-persian-month-antd";
4
5<DatePicker locale={convertToPersianMonths(locale)} format="YYYY/MM/DD" />;

Example

1import { ConfigProvider, DatePicker } from "antd";
2import dayjs from "dayjs";
3import jalaliday from "jalaliday";
4import locale from "antd/es/date-picker/locale/fa_IR";
5import convertToPersianMonths from "convert-to-persian-month-antd";
6
7dayjs.extend(jalaliday);
8dayjs.calendar("jalali");
9
10const PersianDatePicker = ({ onChange, ...props }) => {
11  return (
12    <ConfigProvider direction="rtl">
13      <DatePicker
14        locale={convertToPersianMonths(locale)}
15        format="YYYY/MM/DD"
16        onChange={(date) => {
17          console.log(date.format("YYYY/MM/DD"));
18        }}
19        {...props}
20      />
21    </ConfigProvider>
22  );
23};
24
25export default PersianDatePicker;

License

MIT