Ant Design Jalali/Shamsi calendar DatePicker and RangePicker (Support Ant design v5 and v4). Day.js and jalaliday
https://masoudit.github.io/antd-jalali-plus
- Support Ant Design Version 5
- Support React 16/17/18
- Fix All RTL Issues
antd-jalali-plus is a forked and upgraded version of antd-jalali, which was a valuable tool but is no longer maintained.
The primary goal of antd-jalali-plus is to ensure that users who rely on the functionality of antd-jalali continue to have access to a reliable and supported solution with latest version of Ant design. By taking over maintenance responsibilities, We are committed to providing timely updates, bug fixes, and improvements to enhance the overall usability and stability of the package.
npm i antd-jalali-plus@v1.4.x
npm i antd-jalali-plus@v1.3.x
npm i antd-jalali-plus
or
yarn antd-jalali-plus
import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, ConfigProvider } from "antd";
import { DatePicker as DatePickerJalali, Calendar, JalaliLocaleListener } from "antd-jalali-plus";
import fa_IR from "antd/lib/locale/fa_IR";
import en_US from "antd/lib/locale/en_US";
import "antd/dist/antd.css";
import "./index.css";
ReactDOM.render(
<div className="App">
Gregorian: <DatePicker />
<br />
<br />
<ConfigProvider locale={fa_IR} direction="rtl">
<JalaliLocaleListener/>
Jalali: <DatePickerJalali />
Jalali RangePicker: <DatePickerJalali.RangePicker />
<br />
<br />
<Calendar />
</ConfigProvider>
</div>,
document.getElementById("root")
);
You should pass dayjs object with jalali calendar
import dayjs from 'dayjs'
import { DatePicker as DatePickerJalali, Calendar as CalendarJalali, useJalaliLocaleListener } from "antd-jalali-plus";
// You should call this hook in child component of <ConfigProvider>
// You can also use component helper for this hook <JalaliLocaleListener>
useJalaliLocaleListener();
// If you want to all new instanses of dayjs use jalali calendar (no matter what is the locale),
// you can set default calendar for dayjs and remove useJalaliLocaleListener hook.
dayjs.calendar('jalali');
const date = dayjs("1399-01-01", {jalali:true});
<DatePickerJalali defaultValue={date}/>
<CalendarJalali value={date}/>
also you can create a jalali date without changing default calendar
const date = dayjs()
const jalaliDate = date.calendar('jalali')
You can read more information about daysjs jalali on jalaliday repo.